Html 使div的高度为查看端口高度或页面整个高度的100%

如果您看看这个JSFIDLE示例：

您可以看到

侧栏

和

内容

元素都延伸到视图端口的底部。这就是我想要的

但是，如果给定的某些内容会拉伸页面并要求用户滚动：

侧栏

和

内容

div在视图端口底部被切断。我知道为什么会发生这种情况，因为

100%

指的是父元素的整个高度，在本例中是视图端口，但当我将标记更改为在两个元素周围有一个包装div，并具有

min height:100%

时，会发生以下情况：

类似地，如果内容不再足够长而不适合查看端口，则

侧栏

和

内容

div的作用就好像它们根本没有指定高度一样：

---

因此，我的问题是，如果内容没有延伸到页面上，如何让

侧边栏和
内容
div成为查看端口的高度，或者如果内容延伸到页面上，如何让它们成为内容的高度？
诀窍是给元素一个巨大的
填充底部，带有相应的负数
页边距底部
：

html，正文{
身高：100%；
}
#包装纸{
最小高度：100%；
溢出：隐藏；
}
#侧栏，#内容{
浮动：左；
垫底：999em；
边缘底部：-999em；
}

这是您的提琴：
或者使用javascript将边栏高度设置为内容的高度。我更喜欢这个。底部的
填充使得边栏非常长。但是，同样的金额被“截断”，并带有负的
保证金底部
。因此，从理论上讲，您将什么也不做，因为您扩展了它，然后通过
999em
将其切断。但是，它不会被
999em
切断，因为它旁边有一个
，有更多的内容，将文档向下推。这很难解释。您可以转到小提琴并删除
#内容
，您会看到侧边栏看起来“正常”，因为我试图解释。不幸的是，这只起了一半作用。如果你看一看，你会发现如果内容不比视口占用更多的空间，边栏和内容div不会延伸到页面底部。这是真的，因为你仍然需要所有与高度相关的属性。我只是简单地把它们拿出来。看我的更新。嘿，你有3个开放的问题，显然是关于同一件事，你能把它们合并、关闭或更新成一个吗？真的弄乱了网站：（）（）