CSS 100%高度的Div

Question

我正在制作一个网站http://nebkat.com/beta/index.php，其中有一个灰色背景和一个白色内容背景（可以自行查看）。问题是，我无法将白色部分设置为100％的高度。它只保持到标题（欢迎...），然后停止。

- nebkat

Answer 1

浏览器不会按照百分比指定的高度进行渲染（编辑：我的意思是，它们无法按照您期望的方式工作）。

您需要在<div id="container"> div内部放置一个清除浮动的div。这里是应该放置它的位置：

<div id="container">
    <div id="logo">...</div>
    <div id="menu">...</div>
    <div id="content">...</div>
    <!-- HERE -->
    <div style="clear: both;"></div>
</div>

- Salman A

---

除非父元素的高度被视为“自动”（在这种情况下，百分比也被视为自动），否则它们将会存在。 - Quentin

这意味着父元素的高度必须以px为单位指定？对吗？ - Salman A

没有任何单位限制。唯一的限制是不能是自动的（如果它是一个百分比，则将此段落应用于其父级（以此类推，递归地））。 - Quentin

Answer 2

将 #container div 的高度设置为 100％，这应该可以解决问题（至少在 Firefox 3.6 中可以解决）。

你应该真的安装像Firebug这样的工具，它可以在网站上“即时”修改 css 属性。使用它可以轻松地解决像这样的问题。

- luke

Answer 3

将容器div的高度设置为100％，这样就可以解决您的问题。

- Vinay Pandey

Answer 4

这个答案应该更新为这个: 使div高度占满整个浏览器窗口

body,html{
    height:100%;
}

#container{
  height:100%
}

- Derik

Answer 5

你可以使用 min-height:100%; 或者 min-height:500px。

这样可以解决你的问题。

- sundowatch

Answer 6

CSS中的height: 100%并不像你期望的那样起作用。

我的解决方案是编写一些简单的JavaScript来测量可用高度，然后适当地设置div的高度。
这应该很简单，但如果你需要任何帮助，我会为你整理好的。:)

- Venemo

---

我知道如何做，但问题是我不想让JavaScript去执行CSS的操作。使用旧版浏览器可能会导致显示效果不佳 :-/ - nebkat