нужно DIV, чтобы расширить свой рост для своих детей - PullRequest
Новая
       4

нужно DIV, чтобы расширить свой рост для своих детей

5 голосов
/ 12 марта 2010

Я пытаюсь увеличить высоту моего 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)?

Спасибо, John

Ответы [ 2 ]

14 голосов
/ 12 марта 2010

Если вы хотите, чтобы он расширялся, не навязывайте ему высоту ...

уберите height:100px; из правила css.

Похоже, вы хотите всплытьвнутри див.Если это так, вы можете (после удаления высоты) либо сделать это с очищающим div, либо удалить очищающий div и установить переполнение на auto в правиле 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, но по причине - fault оно будет расширено для включения содержимого..

2 голосов
/ 12 марта 2010

Просто удалите фиксированную высоту из стиля: 

<!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>

Michael

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...