Як зробити плаваючий діва на 100% висоту свого батька?

Ось HTML:

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

І ось CSS:

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

Після огляду інструментами для розробників Chrome внутрішній діви отримує висоту 0px.

Як я можу змусити його бути 100% висоти батьківського діва?

Щоб #outerвисота ґрунтувалася на її вмісті, і на її #innerоснові було встановлено висоту, зробіть обидва елементи абсолютно розміщеними.

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

Я зробив приклад вирішення вашої проблеми.

Ви повинні зробити обгортку, плисти нею, а потім розташувати абсолютну свою діву і надати їй 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 розміщений абсолютно. Це означає, що його ширина і висота, а також верхній і лівий позиції будуть обчислюватися на основі першого батьківського діла абсолютно або відносно, розміщеного ТІЛЬКИ, якщо властивості ширини або висоти явно оголошені в 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 для зовнішнього діла

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

Зверху внутрішній дів

Сподіваюся, це допоможе тобі

Це мені допомогло.

#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;}

показати більше варіантів у: Як уберегти батьків плаваючих елементів від руйнування?