Установите плавающий div на высоту: 100%?

Question

Я подозреваю, что на это нет ответа, но мне было интересно, есть ли способ установить высоту плавающего div на 100%?

У меня есть две дивы внутри оболочки DIV:

<div id="wrapper"> 
    <div id="left"> 
    </div> 
    <div id="right"> 
    </div> 
</div> 

право DIV имеет набор высоты, и я хочу левой ДИВ, чтобы соответствовать, поэтому я создал:

#wrapper { 
    background-color: red; 
    width: 200px; 
    height: 100%; 
    overflow: auto; 
    padding: 5px; 
} 

#left{ 
    width: 90px; 
    height: 100%; 
    float:left; 
    background-color: #ccc; 
} 

#right{ 
    width: 90px; 
    height: 300px; 
    float:right; 
    background-color: blue; 
} 

Но левый div не расширяется. Fiddle here: http://jsfiddle.net/8dstK/2/

Может кто-нибудь знать способ достижения divs равной высоты?

Должен ли я использовать JQuery для захвата высоты правого div и применить его к левому div?

Answer 1

Вы можете сделать это путем создания таблицы типа scructure из <div> S Мне n ваш HTML, а затем с помощью display: table, display: table-cell и т. д. Это будет работать, потому что ячейки таблицы в той же строке автоматически изменяются до той же высоты, что и самая высокая ячейка. Однако IE7 и ниже do not supportdisplay: table.

jsFiddle

<div id="wrapper"> 
    <div id="inner-wrapper"> 
     <div id="left"> 
      left 
     </div> 
     <div id="right"> 
      right 
     </div> 
    </div> 
</div> 

#wrapper  { display: table; } 
#inner-wrapper { display: table-row; } 
#left   { display: table-cell; } 
#right   { display: table-cell; } 

мне пришлось удалить float: left и float: right от #left и #right, чтобы получить отображение таблицы ячейки для работы, так как ячейки таблицы не может плавать. Тем не менее, это закрепило два div вместе. И ячейки таблицы не принимают поля, а только отступы.Вам может понадобиться дополнительный display: table-cell div между left и right, чтобы отделить их, если вы не хотите, чтобы их отделяли.

Узнайте больше о display: table и семье on QuirksMode и on MDN.

Answer 2

Так я знаю, как это сделать. С позиции абсолютная и верхняя/нижняя/левая Обновлена ​​ваша скрипка: http://jsfiddle.net/8dstK/3/

В принципе, вы устанавливаете позицию div обертки относительно, чтобы дочерние div могли размещаться абсолютно внутри обертки. Затем мы устанавливаем, чтобы левый div был абсолютно позиционирован и учитывал прописку в нашем позиционировании. Установите верхнюю часть на 5 пикселей, слева на 5 пикселей и снизу до 5 пикселей. Это должно сделать это.

#wrapper { 
    background-color: red; 
    width: 200px; 
    height: 100%; 
    overflow: auto; 
    padding: 5px; 
    position:relative; 
} 

#left{ 
    width: 90px; 
    float:left; 
    background-color: #ccc; 
    top:5px; 
    left:5px; 
    bottom:5px; 
    position:absolute; 
} 

#right{ 
    width: 90px; 
    height: 300px; 
    float:right; 
    background-color: blue; 
} 

Answer 3

Существует ответ и с решением. Высота не расширяется, потому что это <div> и <div> - элемент уровня блока.

Если вы хотите, чтобы это расширить, вы должны преобразовать его display в table, чтобы его расширить.

Ниже приведена рабочая демонстрация для этого же.

WORKING DEMO

HTML-:

<div id="wrapper"> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
     right 
    </div> 
</div> 

CSS-:

#wrapper { 
    background-color: red; 
    width: 200px; 
    height: 100%; 
    overflow: auto; 
    padding: 5px; 
    display:table; 
} 

#left{ 
    width: 90px; 
    height: 100%; 
    float:left; 
    background-color: #ccc; 
    display:table; 
} 

#right{ 
    width: 90px; 
    height: 300px; 
    float:right; 
    background-color: blue; 
} 

Answer 4

Сделать родительский элемент установлен на фиксированную высоту (скажем, 300px), то дети будут автоматически принимать всю ширину родителя на 100% в http://jsfiddle.net/8dstK/6/

#wrapper { 
     background-color: red; 
     width: 200px; 
     height: 300px; 
     overflow: auto; 
     padding: 5px; 
    } 

    #left{ 
     width: 90px; 
     height: 100%; 
     float:left; 
     background-color: #ccc; 
    } 

    #right{ 
     width: 90px; 
     height: 100%; 
     float:right; 
     background-color: blue; 
    } 

Answer 5

использовать наиболее часто используемый класс clearfix на родительском DIV , этот вопрос уже доступен. проверьте эту ссылку. How do you keep parents of floated elements from collapsing?