Html

有时在 Html 中我们需要固定底部的版权信息等内容，期望的展示方式是页面撑满浏览器，最下方是 footer 的内容。 <div class="main"> <div class="content"> ... </div> <footer>版权所有</footer> </div> 如到所示，我们希望的是footer永远占据页面的最下方，而content内容则填满页面的其他部分。 想当然的方法 想当然的方法去实现，是直接将div.main部分的height设置为100%，这样可以直接撑满页面，虽然在内容少的时候确实达到了我们想要的效果，但弊端也十分明显——在页面内容多于一页的时候，内容会展示不全，因为设置了固定的height，所以内容并不会将div.main进一步撑开。所以这样是不行的。 使用min-height Html 中可以使用min-height来指定内容高度。根据这个思路我们可以将div.conent的min-height设置为80%，同时将footer的min-height设置为20%。 然而这个解决方案看起来很完美，实际上用起来的时候还是会有问题，原因如下： 一个元素如果要指定min-height，那么它的父元素必须指定height，指定min-height也无济于事。也就是说div.main必须指定height这一属性。然而还是那个height不能自动变大的问题。 最终方案——使用position 那么最终的解决方案应该怎样呢？答案是使用position 先给出最终的Html和CSS代码： <div class="main"> <div class="content"> ... </div> <footer>版权所有</footer> </div> div.main { min-height: 100%; position: relative; padding-bottom: 10rem; } footer { height: 10rem; position: absolute; bottom: 0; } 首先将div.main的最小高度设置为100%，随后将其位置指定为relative；随后指定footer的位置为absolute，这样footer会相对于上一个位置被指定为relative的元素进行布局，随后bottom: 0;将footer设置在了div.main的最下方。 当然不要忘记了div.main需要有一个padding-bottom，大小等于footer的高度，这样内容才不会错位。 到此我们就实现了最完美的固定footer的样式。