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

Question

Вот HTML:

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

А вот и CSS:

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

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

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

Answer 1

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

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

Iудалил мой предыдущий ответ, так как он основывался на слишком большом количестве неверных предположений о вашей цели.

Answer 2

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

display: flex;

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

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

Редактировать 2: Как заметил @toddsby, выровнять элементы для родителя, и его значение по умолчанию на самом деле stretch . Если вам нужно другое значение для потомка, есть свойство align-self.

Редактировать 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

Answer 3

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

Answer 4

Если вам не требуется поддерживать версии 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 занимать всю высоту своего родительского элемента.

Answer 5

Я сделал пример решения вашей проблемы.

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

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

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

Answer 6

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

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

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

Благодаря @Itay в Плавающий div, 100% высоты

Answer 7

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

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

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

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

Answer 8

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

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

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

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

Над внутренним div

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

Answer 9

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

https://css -tricks.com / с использованием-Flexbox /

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

Answer 10

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

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

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