Question

我试图让我的DIV的高度扩展到它的子元素。我已经阅读了其他一些帖子，但一直无法为这些问题找到答案。

这是一个代表我的问题的HTML示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        .PropertyPanelMain
        {
            font-size: 8pt;
            color: #000;
            border: 2px solid #ccc;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="PropertyPanelMain">
        <div style="">This content should make the outer DIV expand. This content should make the outer DIV expand. This content should make the outer DIV expand. This content should make the outer DIV expand. </div>
        <div style="">More content</div>
            <div style="clear:both;"></div>
    </div>
</body>
</html>

有人可以告诉我如何让外部DIV扩展到其内容（两个孩子的DIV）吗？

谢谢，约翰

Answer 1

如果你想扩展它，那就不要在它上面加一个高度......

从css规则中删除height:100px;。

好像你想浮动内部div。如果是这种情况，你可以（删除高度后）使用清除div，或者删除清除div并在PropertyPanelMain规则上将溢出设置为自动。

.PropertyPanelMain
        {
            font-size: 8pt;
            color: #000;
            border: 2px solid #ccc;
            width: 100px;
            overflow:auto;
        }

[评论更新]

要使用最小高度，您可以使用min-height css属性，但由于所有浏览器都不支持，我们使用!important css指令

进行操作

.PropertyPanelMain
        {
            font-size: 8pt;
            color: #000;
            border: 2px solid #ccc;
            width: 100px;
            overflow:auto;

            min-height:100px; 
            height:auto!important;
            height:100px;
        }

IE会忽略height:auto规则，因为它不尊重!important指令，但是通过de- 错误它会扩展为包含内容..

Answer 2

只需从样式中移除固定高度：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
        .PropertyPanelMain 
        { 
            font-size: 8pt; 
            color: #000; 
            border: 2px solid #ccc; 
            width: 100px;         
        } 
    </style> 
</head> 
<body> 
    <div class="PropertyPanelMain"> 
        <div style="">This content should make the outer DIV expand. This content should make the outer DIV expand. This content should make the outer DIV expand. This content should make the outer DIV expand. </div> 
        <div style="">More content</div> 
            <div style="clear:both;"></div> 
    </div> 
</body> 
</html>

迈克尔

需要DIV将其高度扩展到其孩子身上

2 个答案: