html - 在视口和页面上都具有 100% 高度的块

Question

这就是 10^6 $ 的问题！

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

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

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

谢谢！

score 2 · Accepted Answer

最常见的方法是这样做：

html, body { height:100%; }

然后将要填充垂直空间的任何元素设置为高度：100%。

注意：为此，该项目需要是块级的并且有内容，甚至是 &nsbp; 会做并且不要忘记填充会增加元素的高度，因此如果您绝对必须在该元素上进行填充，请务必进行相应的补偿。

score 1 · Accepted Answer

min-height就是你所描述的。只知道你必须给html,body和所有父标签一个高度才能使百分比高度起作用：

html, body, #someBlockId { 
    margin: 0;
    padding: 0;
    min-height: 100%;
}

注意：我必须删除边距和填充，因为它们是在计算高度之后添加的。box-sizing可以改变这种行为，但它不是跨浏览器。

score 0 · Accepted Answer

考虑到：

块的底部应始终触及页面底部

我会喜欢：

.block {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

然后设置高度 if height(block content) > height(viewport)。

如果height设置为 no，它将占用偏移父级的所有空间。

如果height设置，它将覆盖top:0; bottom:0;. 然后如果height设置了并且您删除top（删除，没有将其设置为 0），它将粘在偏移父级的底部。

3 回答 3