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

Question

如果您查看这个 jsfiddle 示例：http://jsfiddle.net/2YbpZ/，您会发现侧边栏和内容元素都延伸到视口底部。这正是我想要的。

然而，当给出一些需要用户滚动的页面并拉伸页面的内容时：http://jsfiddle.net/p6qGg/，侧边栏和内容 div 在视口底部被截断。我知道为什么会发生这种情况，因为 100% 是指父元素的整个高度，即视口，在这种情况下，但当我更改标记以使两个元素周围有一个包装器 div 并具有 min-height: 100% 时，会发生以下情况：http://jsfiddle.net/Lr6k9/。

同样，如果内容不再足够长以适合视口，则侧边栏和内容 div 会表现得好像它们根本没有分配高度：http://jsfiddle.net/xsHHv/。

因此，我的问题是如何使侧边栏和内容 div 在内容不拉伸页面时成为视口的高度，或者在内容拉伸页面时使它们成为内容的高度？

- James Dawson

---

嘿，你有三个关于同一问题的开放性问题，能否将它们合并、关闭或更新为一个问题？这会让网站变得混乱：(https://dev59.com/9mYq5IYBdhLWcg3w2EBi) (http://stackoverflow.com/questions/14164416/div-cuts-off-at-bottom-of-view-port-when-it-should-stretch-to-the-hight-of-the-c) - 7zark7

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/

- Joseph Silber

---

或者使用JavaScript将侧边栏的高度设置为内容的高度。我更喜欢这种方法。 - alexvance

padding-bottom 使侧边栏变得非常长。但是，同样的量被负 margin-bottom “切掉”。因此，理论上，你什么也没做，因为你将其扩展了 999em，然后通过 999em 将其切掉。但是，它不会被 999em 切掉，因为旁边有一个带有更多内容的 <section>，将文档向下推。很难解释清楚。您可以转到 fiddle 并删除 #content，您会发现侧边栏看起来“正常”，这就是我试图解释的原因。 - Angel Yan

不幸的是，这只有一半的效果。如果您查看http://jsfiddle.net/Lr6k9/2/，您会发现如果内容不占用比视口更多的空间，则侧边栏和内容div不会延伸到页面底部。 - James Dawson

没错，这是因为你仍然需要所有那些与高度相关的属性。我只是为了简洁而将它们删除了。请看我的更新。 - Joseph Silber