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

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

您可以看到侧边栏内容元素都延伸到视口的底部.这就是我要的.

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

侧边栏内容div在视口的底部被切断.我知道为什么会发生这种情况,因为100%是指父元素的整个高度,在这种情况下是视口,但是当我更改标记以使包装div围绕这两个元素并且具有最小高度:100时%发生这种情况:http://jsfiddle.net/Lr6k9/

同样,如果内容不再足够长以至于不适合视口,则侧边栏内容div就像它们根本没有分配高度一样:http://jsfiddle.net/xsHHv/

所以我的问题是,如果内容没有从页面拉伸,或者如果内容的高度如何,我如何才能将侧边栏内容div作为视口的高度?

最佳答案
诀窍是给你的元素一个巨大的填充底部,相应的负边距底部

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/

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在'',则表示换行,用''切割。
代码实现 option = { backgroundColor: '#080b30', tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...