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

Question

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

我试图让我的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>

Run Code Online (Sandbox Code Playgroud)

有人能告诉我如何让外部DIV扩展到它的内容(两个孩子的DIV)吗？

谢谢,约翰

Answer 1

Gab*_*oli 14

如果你想要它扩展,那么不要强迫它的高度......

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

看起来你想要漂浮内部div.如果是这种情况,您可以(删除高度后)使用清除div执行此操作,或者删除清除div并将PropertyPanelMain规则上的溢出设置为auto.

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

Run Code Online (Sandbox Code Playgroud)

[更新评论]

要使用最小高度,您可以使用min-heightcss属性,但由于所有浏览器都不支持,我们使用!importantcss指令进行操作

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

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

Run Code Online (Sandbox Code Playgroud)

IE将忽略height:auto规则,因为它不尊重!important指令,而是去错将扩大到包括内容..

归档时间：	15 年，6 月前
查看次数：	12449 次
最近记录：	15 年，6 月前