Page 223 - css揭秘

<header> HTML
<h1>Site name</h1>
</header>
<main>
<p>Bacon Ipsum dolor sit amet...
<!-- 从baconipsum.com那里复制一些示意文字过来 --></p>
</main>
<footer>
<p>© 2015 No rights reserved.</p>
<p>Made with ♥ by an anonymous pastafarian.</p>
</footer>

然后我们给页面加上一些基本样式，再给页脚加上一层背景。你可以
在图 7-23 中看到它的样子。现在，让我们把页面内容缩短一些，结果如图
7-24 所示。此时页脚沉不到底的问题就完全暴露出来了！好吧，我们重现
了这个问题，但是该如何解决呢？
图 7-23 假设这个页脚的文本永远不可能折行，那我们就可以推算出它实际所占
这是一个简单的页面，当内容足 的高度：
够长时它的效果
2 行 × 行高 +3× 段落的垂直外边距 + 页脚的垂直内边距 =
2×1.5em+3×1em+1em=7em

同样，我们可以得出页头的高度是 2.5em。接下来，借助视口相关的长
度单位以及 calc() 函数，只需一行 CSS 代码就可以表达出这种尺寸关系，
从而把页脚“固定”到底部：

图 7-24 main {
min-height: calc(100vh - 2.5em - 7em);
页脚沉不到底的问题相当严重 /* 避免内边距或边框搞乱高度的计算： */
box-sizing: border-box;
! }
在 calc() 中使用加减法时
要特别当心：记得在 + 和 - 运算 或者换个方式，我们可以把 <header> 和 <main> 元素包在一个容器里，
符的左右各加一个空格。这条怪 然后在算式中就只需要考虑页脚的高度了：
异的规则是为了向前兼容。在未
来的某个时候，calc() 内部可能 #wrapper {
会允许使用关键字，那么 CSS 解 min-height: calc(100vh - 7em);
析器就需要有依据来区分关键字 }
中的连字符和减号运算符。
这个方法是有效的（参见图 7-25），而且它似乎比那些需要固定高度的
方案还要稍好一些，主要好在它的代码极其精简。不过，如果页面布局不是
这么简单的话，那这个方法就完全不实用了。它不仅要求我们确保页脚内
的文本永远不会折行，而且每当我们改变页脚的尺寸时，都需要跟着调整
min-height 值（也就是说，这不够 DRY）；此外，除非我们愿意给页头和
内容主体套一层额外的 HTML 元素，否则还要跟着页头的尺寸修改。想必
在这个美好的新时代，我们还有更好的办法，对吗？
图 7-25
运用 CSS 的计算功能将页脚固定 试一试 play.csssecrets.io/sticky-footer-fixed
到底部

192 第 7 章 结构与布局

඀ࠡ JOEC