【发布时间】：2012-08-16 03:32:21
【问题描述】：
基本上，我将网站的所有内容都集中在一个 div 中，该 div 具有指定的宽度和 100% 的预期高度，而不管内容的实际长度如何。我为html、body 和#main 指定了height:100%;，但是正如this page 所见，div 仍然很短-我不希望它们在#main 之间有任何差距s 灰色框和屏幕底部。这可能吗？怎么样？
【问题讨论】：
【发布时间】：2012-08-16 03:32:21
【问题描述】：
看到这个jsfiddle
html, body {height: 100%;}
.container {min-height: 100%;}
在这里也讨论这个.....
proper css to ensure that the body element fills the entire screen
【讨论】：
-
这个小提琴的问题是如果外面有另一个Div，它的高度会限制内部Div的高度。例如：jsfiddle.net/yVDXQ/5 为避免这种情况，您必须为所有 div 指定高度，从要拉伸的 div 向外扩展。
-
是的。内部 div 不能比它所包含的 div 大。这就是为什么您必须将主体设置为 100% - 否则包装器或任何没有定义可达到的高度的东西。但在这种情况下 - 我认为没有必要担心......
-
@sheriffderek 这不会拉伸到页面高度，它会拉伸到窗口高度。
-
@HelloWorldNoMore -
<html>不知道它有多“高”......所以，当你告诉<body>是 100% 时，它也不知道发生了什么。 ..所以这是一个父母/孩子相关的问题......这真的不是很棒 - 从长远来看它有它自己的副作用。您必须根据项目选择如何处理它。也检查视口高度---
您可以设置position:absolute，这应该会将其拉伸到底部。似乎这至少在 Opera 和 Chrome 中可以正常工作。
但是，这会与下面的视频播放器发生冲突，并且还会将您的版权声明推到页面下方。也许您可以将通知移到灰色框中？
【讨论】：
您可以通过两种方式实现：
1) 如果您不知道页面的长度，请将高度设置为 100%。
html, body {
height: 100%;
}
.yourContainerClass {
min-height: 100%;
}
2) 如果您知道需要垂直拉伸多少，那么您可以在“vh(vertical height)”中使用高度。
.yourContainerClass{
height:80vh;
}
希望对你有所帮助。谢谢！
【讨论】：