Установка высоты div для захвата высоты div

Question

Установка высоты div для захвата высоты div

0

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

Html:

<div id="engl">
    <div id="lleft">Some text text
     text  text  text  text  text  text
     text  text  text  text  text  text
    </div>
    <div id="rright">Other text</div>
</div>

CSS:

#engl {
    background-color: red;
    width: 200px;
    height: auto;
    overflow: auto;
}

#lleft {
    background-color: yellow;
    width: 140px;
    padding: 10px;
    float: left;
}

#rright {
    background-color: green;
    width: 40px;
    float: left;
    height: inherited;
}

JsFiddle: http://jsfiddle.net/9bLLN/1/

Jérôme Verstrynge 14 дек. 2013, в 23:10

Источник

Теги:

html

css

height

2 ответа

0

Измененный html:

<div id="engl">
    <div id="lleft">Some text text
     text  text  text  text  text  text
     text  text  text  text  text  text
    </div>
    <div id="rright">Other text</div>
    <div style="clear: both"></div>
</div>

Измененный css:

#rright {
    background-color: green;
    width: 40px;
    float: left;
    height: 100%;
}

Плавающие элементы не могут сказать свою высоту своим родителям. Это связано с тем, что требуется третий, пустой DIV с "clear: both".

Это решение немного проблематично, потому что с точки зрения браузеров это не тривиально, высота какого элемента должна указывать, какая. Но с текущими браузерами (ie8+) работает.

peterh 14 дек. 2013, в 18:25

0

Просто попробовал то, что вы сказали в JsFiddle, но это не работает ...
Jérôme Verstrynge 14 дек. 2013, в 21:26

Ещё вопросы

Просто попробовал то, что вы сказали в JsFiddle, но это не работает ...

j08691 · Accepted Answer · 2013-12-14T18-43-00.000Z

Вы можете использовать позиционирование для этого:

#engl {
    background-color: red;
    width: 200px;
    height: auto;
    overflow: auto;
    position:relative; /*NEW*/
}
#lleft {
    background-color: yellow;
    width: 140px;
    padding: 10px;
    float: left;
}
#rright {
    background-color: green;
    width: 40px;
    float: left;
    height: inherited;
    position: absolute; /*NEW*/
    top:0; /*NEW*/
    bottom:0; /*NEW*/
    right:0; /*NEW*/
}

Пример jsFiddle