Как сделать два div на одной строке с одинаковой высотой с помощью браузера

Question

Например, это мой макет страницы,

++++++++++++++++++++++++++
+       +  div2 +       +
+ div1   +     +       +
+       +       + div3  +
+       +++++++++       +
+       +       +       +
+       +       +++++++++
+       +               +
++++++++++++++++++++++++++

Как показано, div1, div2 и div3 находятся на одной строке,

<div id="container" style="width:100%;min-height:500px;">
    <div id="div1" style="float:left;width:19%;height:100%"></div>
    <div id="div2" style="float:left;width:1%;height:100%">
       <img src="toggle.gif" /></div>
    <div id="div3" style="float:left;width:80%;height:100%"></div>
</div>

Но они не имеют одинаковую высоту, поскольку их содержание не одинаково.

Даже я установил минимальную высоту их родительского элемента и установил высоту на 100%.

Я думал, что высота контейнера div # должна> 500px.

И высота трех делителей равна 100%, поэтому они должны занимать не менее 500 пикселей.

Но, похоже, я не прав. Интересно, что происходит?

BWT, внутри div2 есть только значок, который используется для переключения div1 (используйте jquery), однако когда div1 скрыт, div3 также занимает только 80% окна браузера, как заставить div2 и div3 занять все окно?

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

Answer 1

Плавающие не вычисляют свою высоту, основываясь на высоте их родителя, когда вы указываете это в%.Таким образом, ваши 100% не относятся к росту родителей.Подход, который вам, вероятно, следует использовать, - это использование position:absolute; top:0; bottom:0; вместо float:left; height 100%;. Единственная проблема в том, что родитель (в вашем случае container) не будет расти в соответствии с ростом ребенка.Затем вы должны либо указать высоту для container, либо сделать любой из его дочерних столбцов не position:abosute.Попробуйте это:

<div id="container" style="width:100%;height:500px;position:relative;">
<div id="div1" style="background:blue; position:absolute; top:0; bottom:0; width: 19%;"></div>
<div id="div2" style="background:red; position:absolute; top:0; bottom:0; width: 1%; left: 19%;">
   <img src="toggle.gif" /></div>
<div id="div3" style="background:green; position:absolute; top:0; bottom:0; width:80%; left:20%;"></div>

jsfiddle: http://jsfiddle.net/jVRpK/

Answer 2

Когда вы устанавливаете div1, div2, div3 со свойством float, в зависимости от того, какой из них выше, будет определяться высота контейнера div.

Использование Faux Colums - это один из способов исправить это.

Answer 3

Попробуйте добавить min-height:500px; к div1, div2 и т. Д. Свойство Min-height, установленное в родительском контейнере, не означает, что div внутри будет иметь, наконец, 500 px.