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

Question

如果你看看这个jsfiddle例子:http://jsfiddle.net/2YbpZ/

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

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

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

类似地,如果内容不再足够长以至于不适合视口,那么sidebar和contentdiv就好像根本没有分配高度:http://jsfiddle.net/xsHHv/

所以我的问题是,如果内容没有拉伸到页面上,我怎么能将div sidebar和contentdiv视为视口的高度,或者如果内容没有拉到内容的高度呢？

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/