如果你看看这个jsfiddle例子:http://jsfiddle.net/2YbpZ/
您可以看到侧边栏和内容元素都延伸到视口的底部.这就是我要的.
但是,当给出一些拉伸页面并要求用户滚动的内容时:http://jsfiddle.net/p6qGg/
侧边栏和内容div在视口的底部被切断.我知道为什么会发生这种情况,因为100%是指父元素的整个高度,在这种情况下是视口,但是当我更改标记以使包装div围绕这两个元素并且具有最小高度:100时%发生这种情况:http://jsfiddle.net/Lr6k9/
同样,如果内容不再足够长以至于不适合视口,则侧边栏和内容div就像它们根本没有分配高度一样:http://jsfiddle.net/xsHHv/
最佳答案
诀窍是给你的元素一个巨大的填充底部,相应的负边距底部:
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/