Вот HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
И вот CSS:
#inner {
float: left;
height: 100%;
}
После проверки с помощью инструментов разработчика Chrome внутренний div получает высоту 0px.
Как я могу заставить его быть 100% высоты родительского div?
Для высоты #outer, основанной на ее содержании, и #inner основывайте свою высоту на этом, сделайте оба элемента абсолютно позиционированными.
Более подробную информацию можно найти в спецификации для свойства высоты css, но по существу #inner должен игнорировать высоту #outer, если #outer height auto, если #outer не находится абсолютно. Тогда высота #inner будет равна 0, если только #inner не находится абсолютно.
<style>
#outer {
position:absolute;
height:auto; width:200px;
border: 1px solid red;
}
#inner {
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
Однако... Постановка #inner абсолютно, параметр float будет проигнорирован, поэтому вам нужно будет явно выбрать ширину для #inner и добавить дополнение в #outer для подделки обертывания текста я подозреваете, что хотите. Например, ниже, заполнение #outer представляет собой ширину #inner +3. Удобно (поскольку цель заключалась в том, чтобы получить высоту #inner до 100%), нет необходимости обертывать текст ниже #inner, поэтому это будет выглядеть так, как плавает #inner.
<style>
#outer2{
padding-left: 23px;
position:absolute;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2{
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer2'>
<div id='inner2'>
</div>
text
</div>
Я удалил свой предыдущий ответ, поскольку он был основан на слишком многих ошибочных предположениях о вашей цели.
Для родителя:
display: flex;
Вы должны добавить некоторые префиксы http://css-tricks.com/using-flexbox/
Изменить: Единственным недостатком является IE, как обычно, IE9 не поддерживает flex. http://caniuse.com/flexbox
Изменить 2: Как отметил @toddsby, выровнять элементы для родителя, а его значение по умолчанию действительно растянуто. Если вы хотите другое значение для дочернего элемента, есть свойство align-self.
Фактически, пока размещен родительский элемент, вы можете установить высоту ребенка на 100%. А именно, если вы не хотите, чтобы родитель был абсолютно позиционирован. Позвольте мне пояснить далее:
<style>
#outer2 {
padding-left: 23px;
position: relative;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2 {
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer2'>
<div id='inner2'>
</div>
</div>
Пока вам не нужно поддерживать версии Internet Explorer раньше IE8, вы можете использовать display: table-cell для выполнения этого:
HTML:
<div class="outer">
<div class="inner">
<p>Menu or Whatever</p>
</div>
<div class="inner">
<p>Page contents...</p>
</div>
</div>
CSS
.inner {
display: table-cell;
}
Это заставит каждый элемент с классом .inner занять всю высоту своего родительского элемента.
Я сделал пример, решив вашу проблему.
Вы должны сделать обертку, поплавать ею, затем поместить абсолютный свой div и дать ему 100% высоты.
HTML
<div class="container">
<div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
<div class="right-wrapper">
<div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
</div>
<div class="clear"> </div>
</div>
CSS
.container {
width: 100%;
position:relative;
}
.left {
width: 50%;
background-color: rgba(0, 0, 255, 0.6);
float: left;
}
.right-wrapper {
width: 48%;
float: left;
}
.right {
height: 100%;
position: absolute;
}
Объяснение:. Это означает, что его ширина и высота, а также верхняя и левая позиции будут вычисляться на основе первого родительского div, абсолютно или относительного, ТОЛЬКО, если свойства ширины или высоты явно объявлены в CSS; если они не декларированы, эти свойства будут исчислены на основе родительского контейнера (.right-wrapper).
Таким образом, высота 100% DIV будет подсчитана на основе конечной высоты .container, а конечная позиция .right будет рассчитываться на основе родительского контейнера.
Здесь это более простой способ добиться этого:
#outer{
display: table;
}
#inner {
display: table-cell;
float: none;
}
Благодаря @Itay в плавающий div, высота 100%
Если вы готовы использовать небольшой jQuery, ответ прост!
$(function() {
$('.parent').find('.child').css('height', $('.parent').innerHeight());
});
Это хорошо работает для плавания одного элемента в сторону со 100% -ной высотой его родительского элемента, тогда как другие плавающие элементы, которые обычно обертываются, сохраняются в одной стороне.
Надеюсь, что это поможет поклонникам jQuery.
Это помогло мне.
#outer {
position:relative;
}
#inner {
position:absolute;
top:0;
left:0px;
right:0px;
height:100%;
}
Изменить вправо: и влево: чтобы установить предпочтительную ширину #inner.
Аналогичный случай, когда вам нужно несколько дочерних элементов, имеет ту же высоту, которую можно решить с помощью flexbox:
https://css-tricks.com/using-flexbox/
Задайте display: flex; для родителя и flex: 1; для дочерних элементов, все они будут иметь одинаковую высоту.
попробуйте
#outer{overflow: auto;}
показать дополнительные параметры: Как вы держите родительские элементы от обтекания?