Как сделать плавающий div 100% высотой своего родителя?

для родителей:

display: flex;

вы должны добавить некоторые префиксы http://css-tricks.com/using-flexbox/

изменить: Единственным недостатком является IE как обычно, IE9 не поддерживает flex. http://caniuse.com/flexbox

редактировать 2: Как отметил @toddsby, align items предназначен для parent, и его значение по умолчанию на самом деле стрейч. Если вы хотите другое значение для ребенка, есть 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">&nbsp;</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;
}

объяснение: The .правый див с абсолютным позиционированием. Это означает, что его ширина и высота, а также верхняя и левая позиции будут вычисляться на основе первого родительского div абсолютно или относительная позиция только в том случае, если свойства width или height явно объявлены в CSS; если они не объявлены явно, эти свойства будут вычисляться на основе родительского контейнера (.справа-обертка).

таким образом, 100% высота DIV будет рассчитываться на основе .высота контейнера окончательная, и окончательное положение .правильная позиция будет вычисляться на основе родительского контейнера.

здесь это более простой способ добиться этого:

1. установите контейнер трех элементов (#внешний) дисплей: таблица
2. и сами элементы (#внутренний) дисплей: таблицы-ячейка
3. удалить плавающий.
4. успехов.

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

спасибо @Itay in плавал div, 100% высота

Если вы готовы использовать немного jQuery, ответ прост!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

Это хорошо работает для перемещения одного элемента в сторону со 100% высотой его родителя, в то время как другие плавающие элементы, которые обычно обертываются, хранятся в одной стороне.

надеюсь, что это поможет другим поклонникам jQuery.

это пример кода для сеточной системы с одинаковой высотой.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

выше CSS для внешнего div

#inner{
width: 20%;
float: left;
border: 1px solid;
}

выше находится внутренний div

надеюсь, что это поможет вам

это помогло мне.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

изменить вправо: и влево: чтобы установить предпочтительную # внутреннюю ширину.

аналогичный случай, когда вам нужно несколько дочерних элементов имеют одинаковую высоту можно решить с помощью flexbox:

https://css-tricks.com/using-flexbox/

Set display: flex; для родителей и flex: 1; для дочерних элементов, все они будут иметь одинаковую высоту.

попробовать

#outer{overflow: auto;}

Показать дополнительные параметры в: как вы держите родителей плавучих элементов от коллапса?