如果您看一下这个jsfiddle示例:http://jsfiddle.net/2YbpZ/
您可以看到sidebar
和content
元素都延伸到视口的底部。这就是我想要的。
然而,当给定一些内容延伸页面并要求用户滚动时:http://jsfiddle.net/p6qGg/
sidebar
和content
div在视口的底部被切断。我知道为什么会发生这种情况,因为100%
指的是父元素的整个高度,在这种情况下是视口,但当我更改标记以使包装div包围这两个元素并且min-height: 100%
时1}}会发生这种情况:http://jsfiddle.net/Lr6k9/
同样,如果内容不再足够长以至于不适合视口,则sidebar
和content
div的行为就好像它们根本没有分配高度:http://jsfiddle.net/xsHHv/
所以我的问题是,如果内容没有从页面伸展,或者让它们具有高度,我怎么能让sidebar
和content
div成为视口的高度?内容,如果它?
答案 0 :(得分:10)
诀窍是给你的元素一个巨大的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/