使 div 的高度为视口高度的 100% 或页面的整个高度答案

【问题标题】：Making the height of a div 100% of the view-port height or the entire height of the page使 div 的高度为视口高度的 100% 或页面的整个高度
【发布时间】：2013-01-04 17:55:12
【问题描述】：

如果您看一下这个 jsfiddle 示例：http://jsfiddle.net/2YbpZ/

您可以看到sidebar 和content 元素都延伸到视口的底部。这就是我想要的。

但是，当给定一些拉伸页面并要求用户滚动的内容时：http://jsfiddle.net/p6qGg/

sidebar 和 content div 在视口底部被截断。我知道为什么会发生这种情况，因为100% 指的是父元素的整个高度，在这种情况下是视口，但是当我将标记更改为有一个围绕这两个元素的包装 div 并有min-height: 100% 这个发生：http://jsfiddle.net/Lr6k9/

同样，如果内容不再长到无法容纳视口，sidebar 和 content div 就像根本没有分配高度一样：http://jsfiddle.net/xsHHv/

所以我的问题是，如果内容没有超出页面，我如何让sidebar 和content div 成为视口的高度，或者让它们成为内容的高度?

【问题讨论】：

嘿，您有 3 个未解决的问题，显然是关于同一件事，您可以将它们合并、关闭或更新为一个吗？真的把网站搞得一团糟：(stackoverflow.com/questions/14151663/…) (stackoverflow.com/questions/14164416/…)

标签： html css

【解决方案1】：

诀窍是给你的元素一个巨大的padding-bottom，对应的负数margin-bottom：

html, body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    overflow: hidden;
}

#sidebar, #content {
    float: left;
    padding-bottom: 999em;
    margin-bottom: -999em;
}

这是你的小提琴：http://jsfiddle.net/Lr6k9/4/

【讨论】：

或者使用javascript设置侧边栏高度等于内容的高度。我更喜欢这个。
padding-bottom 使侧边栏非常长。但是同样的数量被“切断”了一个负数margin-bottom。所以，理论上，你什么都不做，因为你扩展它999em，然后你把它切断999em。但是，它不会被999em 截断，因为有一个<section> 旁边有更多内容，将文档向下推。很难解释。您可以转到小提琴并删除#content，您会看到侧边栏看起来“正常”，因为我试图解释。
不幸的是，这只有一半有效。如果您查看jsfiddle.net/Lr6k9/2，您会发现如果内容不占用比视口更多的空间，则侧边栏和内容 div 不会延伸到页面底部。
确实如此，因为您仍然需要所有与高度相关的属性。为了简洁起见，我刚刚把它们拿出来。查看我的更新。