двухэтажная полноразмерная компоновка расширяется, чтобы содержать контент

Я пробовал это несколько способов использования javascript для выравнивания высот столбцов, но это грязно и вызывает другие проблемы.двухэтажная полноразмерная компоновка расширяется, чтобы содержать контент

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

Самый популярный, кажется, чтобы привлечь

body, html { height:100%;} 
.col{width:50%; height:100%; float:left;} 

<body> 
<div class="col left">1st col 
    <div class="bigdiv">yo</div> 
    <div class="bigdiv">yo</div> 
    <div class="bigdiv">yo</div> 
</div> 
<div class="col right">2nd col</div>

, но это не растягиваться, если один из столбцов длиннее страницы.

http://jsfiddle.net/8nAA4/1/

Там должен быть простой способ сделать это, и я должен быть глупым, но я пытался различные методы в течение нескольких дней, и это делает мою голову.

PHP, javascript, html все просто. css все еще меня смущает!

источник

2013-12-04 Zaphod Beeblebrox

Это на самом деле очень сложная проблема, которая досадно дизайнеров навсегда. Когда вы используете 'height: 100%', он устанавливает высоту в высоту родительского элемента, в этом случае тело, которое будет высотой области просмотра. Есть несколько различных решений проблемы, как вы уже заметили. Google «css святой грааль» и выберите лучший для вашей ситуации. Мне нравится @ Oriol's ниже. – sn3ll

Использование

body{ 
    display: table; 
} 
.col{ 
    display: table-cell; 
}

Demo

источник

2013-12-04 18:03:46 Oriol

Очень умный трюк ... +1 – sn3ll

двухэтажная полноразмерная компоновка расширяется, чтобы содержать контент

ответ

Смежные вопросы