CSS: Как заставить левый float div динамически регулировать высоту?

Как я могу сделать свой плавающий левый div со статическим содержимым, чтобы автоматически настроить его высоту на ту же высоту правого виртуального div с динамическим контентом?

Итак, что я пытаюсь сделать, так это то, что оба левого и правого div будут иметь одинаковую высоту (левый div автоматически настраивается на правую высоту div)

Ниже приведен пример кода.

Заранее спасибо:)

Cheers, Марк

<html>
<head>
    <style type="text/css">
        body {
            font-family:verdana;
            font-size:12px;
        }
        .parent {
            border:1px solid red;
            width:530px;
            /*min-height:100%;*/
            padding:5px;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
        }
        .right {
            border:1px solid green;
            width:300px;
            float:right;
            position: relative;
            padding:3px;
        }
        .clr { clear:both; }
        .footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">float left div here only static content</div>
        <div class="right">
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
        </div>
        <div class="clr"></div>
        <div class="footer">Footer here</div>
    </div>
</body>
</html>

Ответы

Ответ 1

Вот рабочее решение для CSS (спасибо pdr для ссылка):

<html>
<head>
    <style type="text/css">
        html, body {
            font-family:verdana;
            font-size:12px;
        }
        .parent {
            border:1px solid red;
            width:530px;
            padding:5px;
            overflow:hidden;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
        }
        .right {
            border:1px solid green;
            width:300px;
            float:right;
            position: relative;
            padding:3px;
        }

        /* a solution but doesn't work in IE */
        /*
        .left, .right {
            min-height: 100px;
            height: auto;
        }
        */

        .left, .right {
            padding-bottom:8000px;
            margin-bottom:-8000px;
            background:none repeat scroll 0 0 lightblue;
        }

        .clr { clear:both; }
        .footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">float left div here only static content</div>
        <div class="right">
            float right div dynamic content here<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
        </div>
        <div class="clr"></div>
        <div class="footer">Footer here</div>
    </div>
</body>
</html>

Ответ 2

Если бы я был вами, я использую простой трюк CSS. Я бы назначил высоту для .Left и .Right в классе css, подобном этому

.Left, .Right
{
    min-height: 200px; /*because of .Left*/
    height: auto;
}

обратите внимание, что приведенный выше код используется всякий раз, когда высота превышает 200px, тогда он будет переопределять значение 200px.

надеюсь, что эта помощь

Полный ответ с Javascript

<script>
function increaseHeight()
{
   Document.getElementById('LeftDivID').style.height = Document.getElementById('RightDivID').style.height;
}
</script>

и вы должны называть его всякий раз, когда вы закончили увеличивать размер правого div

Ответ 4

Здесь перечислены несколько вариантов.

http://www.ejeliot.com/blog/61

Как правило, я думаю, вы, возможно, захотите спросить себя, хотите ли вы действительно два столбца. Может быть, вам лучше со статическим содержимым в родительском div и динамическом содержимом в дочернем div ([Edit] или наоборот).

Ответ 5

попробуйте следующий код, я попробовал с firefox, но надеюсь, что он будет работать на большинстве браузеров

    <html>
<head>
    <style type="text/css">
        body {
            font-family:verdana;
            font-size:12px;
        }
        .parent {
            border:1px solid red;
            width:530px;
            /*min-height:100%;*/
            padding:5px;
        }
        .parent_new {
            border:1px solid red;
            width:530px;            
            padding:5px;
            display: table-cell;
        }
        .row_level
        {
            display:table-cell;
        }
        .cell-level {
            display:table-cell;
            border:1px solid red;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
            display:table-row;
        }
        .right {
            border:1px solid green;
            width:300px;
            float:right;
            position: relative;
            padding:3px;
        }
        .clr { clear:both; }
        .footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="parent_new">
        <div class="row_level">
        <div class="cell-level">float left div here only static content
        </div>
        <div class="cell-level">
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
         </div>
        </div>
        <div class="clr"></div>
        <div class="footer">Footer here</div>
    </div>
</body>
</html>