Как сделать floated div на 100% высоты его родителя?

Вот HTML-код:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

А вот и CSS:

#inner {
  float: left;
  height: 100%;
}

После проверки с помощью инструментов разработчика Chrome внутренний div получает высоту 0px.

Как я могу заставить его быть 100% высоты родительского div?

Чтобы #outerвысота основывалась на его содержимом и #innerосновывалась на его высоте, сделайте оба элемента абсолютно позиционированными.

Больше подробностей можно найти в спецификации для свойства css height , но, по сути, #innerдолжно игнорировать #outerвысоту, если есть #outerвысота 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.

Изменить 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

На самом деле, пока родительский элемент расположен, вы можете установить высоту дочернего элемента на 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;
}

Пояснение: .right div абсолютно позиционирован. Это означает, что его ширина и высота, а также верхняя и левая позиции будут рассчитываться на основе ТОЛЬКО или относительного положения первого родительского элемента div, если свойства ширины или высоты явно объявлены в CSS; если они не объявлены явно, эти свойства будут вычислены на основе родительского контейнера (.right-wrapper).

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

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

1. Установите отображение контейнера трех элементов (#outer): таблица
2. И установить сами элементы (#inner) отображения: table-cell
3. Убери плавающий.
4. Успех.

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

Благодаря @Itay в Floated 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;
}

Выше внутренний див

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

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

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

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

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

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

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

пытаться

#outer{overflow: auto;}

показать больше параметров в: Как вы удерживаете родителей всплывающих элементов от разрушения?