html - 在视口(viewport)和页面上都具有 100% 高度的 block

Question

这是 10^6 $ 的问题!

我已经搜索并阅读了很多相关内容，但是否有最先进的方法可以解决以下问题:

if height(block content) < height(viewport):
    height(block) = height(viewport)
else:
    height(block) = height(block content)

block 的底部应始终触及页面底部。我正在寻找最简单、干净和跨浏览器的方式来做到这一点。

谢谢!

Answer 1

最常见的方法是这样做:

html, body { height:100%; }

然后将所有要填充垂直空间的元素设置为 height:100%。

注意:要使其正常工作，元素需要是 block 级的并且有内容，甚至是 &nsbp;会这样做并且不要忘记填充会增加元素的高度，因此如果您绝对必须在该元素上填充，请务必进行相应的补偿。