html - 使 div 的高度为视口高度的 100% 或页面的整个高度

Question

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

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

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

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

同样，如果内容不再长到不适合视口，则sidebar和contentdiv 就像根本没有分配高度一样：http: //jsfiddle.net/xsHHv/

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

Answer 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/