绝对底部（Sticky Footer）

?> 背景知识： calc(), flex

什么是“Sticky Footer”

所谓 Sticky Footer 是指一种网页效果，如果页面内容不足够长时，页脚紧贴在视口的最底部；如果内容足够长时，页脚紧跟在内容的下方。效果大致如图所示：

利用计算函数 calc() 计算（视窗高度 - 页头高度 - 页脚高度）赋予内容区最小高度

<script v-pre type="text/x-template" id="sticky-calc"> <style> main{ width: 100%; height: 392px; } section input:checked ~ p{ display: none } .main > header, .main > section, .main > footer{ padding: .1em calc(50% - 329px); text-align: justify; hyphens: auto; } header{ text-align: center; } section { box-sizing: border-box; min-height: calc(100% - 59px - 107px); } footer{ color: white; background: #747e7f; } </style>

Site Header

Toggle contents

A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.

A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text.

A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.

© 2018 LHammer

CSS Tricks need to know for web developer.

<script> </script> </script>

Flexbox display: flex

<script v-pre type="text/x-template" id="sticky-flex"> <style> main{ width: 100%; height: 392px; display: flex; flex-direction: column; } section input:checked ~ p{ display: none } .main > header, .main > section, .main > footer{ padding: .1em calc(50% - 329px); text-align: justify; hyphens: auto; } header{ text-align: center; } section { flex: 1; } footer{ color: white; background: #747e7f; } </style>

Site Header

Toggle contents

A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.

A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text.

A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.

© 2018 LHammer

CSS Tricks need to know for web developer.

<script> </script> </script>

浏览器支持

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=calc&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe> <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=flexbox&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="480px"></iframe>