在视口和页面上以100％高度阻止

Question

那是10 ^ 6 $的问题！

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

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

块的底部应始终触摸页面底部。我正在寻找最简单，最干净和跨浏览器的方式来实现这一目标。

谢谢！

Answer 1

最常见的方法是：

html, body { height:100%; }

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

注意：要使其工作，项目需要是块级别并且具有内容，甚至是＆amp; nsbp;我会做，也不要忘记填充会增加元素的高度，所以如果你必须在该元素上填充，请务必相应地进行补偿。

Answer 2

你正在描述

min-height。只需知道您必须为html，body和所有父标记提供高度以便工作百分比高度：

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

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

Answer 3

考虑到：

  

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

我会像：

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

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

如果未设置height，则将占用偏移父项的所有空间。

如果设置了height，则会覆盖top:0; bottom:0;。 然后，如果设置height并删除top（删除，不将其设置为0），它将粘贴到偏移父级的底部。