在 div 上设置 CSS 100% 高度

Question

我有一个 div，我尝试将高度设置为 100%，以便它的内容使 div 增长以适应。

我已经尝试过以下方法，但它不起作用：

添加 100%：

#latest{ height: 100%; background: #e3e3e3 url(banner_grad.jpg) repeat-x; border: none; margin-top: 10px;}

完全不需要高度设置，因此 div 只适合其中的内容：

#latest{ background: #e3e3e3 url(banner_grad.jpg) repeat-x; border: none; margin-top: 10px;}

除非我设置了特定的高度（例如高度：370px；），该 div 甚至不会在 Dreamweaver 的设计视图中显示其轮廓。很奇怪。

有什么想法吗？

谢谢

Answer 1

可能你必须这样写：

html, body{
 height:100%
}

#latest{ 
height: 100%; 
background: #e3e3e3 url(banner_grad.jpg) repeat-x; 
border: none;
margin-top: 10px;
}

Answer 2

height 属性将在此处进行更正。但是请使用以下代码代替此操作。如果继续添加内容，div 的高度也会增加。

#largest {
    background: url("firefox-gray.jpg") repeat-x scroll 0 0 #E3E3E3;
    border: medium none;
    margin-top: 10px;
    overflow: auto;
}

Answer 3

不幸的是，您不能将 div 的高度设置为百分比，主要是因为内容往往会使 div 向下生长，因此您会限制自己。

不过，请看一下 CSS 的 min-height 属性。我认为，这将在某种程度上解决您的问题。

Answer 4

div 的内容是否具有“float: left”或“float: right”属性？

Answer 5

html, body{
   height:100%
}

div{height: 50%}

我不知道这个的浏览器兼容性，所以你可能需要测试它。

http://jsfiddle.net/ZKZFa/