Як змусити дочірнього діва бути 100% висоти батьківського діва, не вказуючи зріст батьків?

У мене є сайт із такою структурою:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Навігація знаходиться зліва, а розділ вмісту - справа. Інформація для вмісту поділяється через PHP, тому вона щоразу відрізняється.

Як я можу масштабувати навігацію вертикально так, щоб її висота була такою ж, як висота вмісту Div, незалежно від того, яка сторінка завантажується?

ПРИМІТКА . Ця відповідь застосовується до застарілих браузерів без підтримки стандарту Flexbox. Про сучасний підхід дивіться на веб-сайті : https://stackoverflow.com/a/23300532/1155721

Я пропоную вам поглянути на стовпчики рівних висот із перехресним браузером CSS та "Без зламів" .

В основному, робити це за допомогою CSS у сумісному для браузера способі не є тривіальним (а тривіальним із таблицями), тому знайдіть собі відповідне попередньо упаковане рішення.

Крім того, відповідь залежить від того, чи хочете ви 100% висоти або рівну висоту. Зазвичай це рівна висота. Якщо 100% висота, відповідь дещо інша.

Для батьків:

display: flex;

Ви повинні додати деякі префікси, http://css-tricks.com/using-flexbox/ .

Редагувати: Як зазначив @Adam Garner, вирівняйте елементи: stretch; не потрібна. Його використання також для батьків, а не для дітей. Якщо ви хочете визначити дітей, що розтягуються, ви використовуєте align-self.

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Це засмучує питання, яким постійно займалися дизайнери. Хитрість полягає в тому, що вам потрібно встановити висоту на 100% у BODY та HTML у вашому CSS.

html,body {
    height:100%;
}

Цей, здавалося б, безглуздий код - це визначити для браузера, що означає 100%. Розчарування, так, але це найпростіший спосіб.

Я вважаю, що встановлення двох стовпців display: table-cell;замість цього float: left;працює добре.

Якщо ви не заперечуєте проти того, щоб навігаційний відрізок був вирізаний у разі несподівано короткого вмісту, є принаймні один простий спосіб:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Інакше є техніка штучних колон .

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

використовуючи jQuery:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

Спробуйте зробити нижню маржу 100%.

margin-bottom: 100%;

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Подивіться на цей приклад .

height : <percent>працюватиме лише у тому випадку, якщо у вас є всі батьківські вузли із заданою відсотковою висотою з фіксованою висотою у пікселях, емах тощо на верхньому рівні. Таким чином, висота буде схилятися до вашого елемента.

Ви можете вказати 100% до html та елементів тіла, як заявлено раніше @Travis, щоб висота сторінки схилялася до ваших вузлів.

Після довгих пошуків і спробувань, нічого, крім моєї проблеми, не вирішило

style = "height:100%;"

на діві дів

і для батьків застосовуйте це

.parent {
    display: flex;
    flex-direction: column;
}

Крім того, я використовую завантажувальний інструмент, і це не пошкодило реагування на мене.

На основі методу, описаного в цій статті, я створив. Менш динамічне рішення:

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

Менше:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

Додати display: gridдо батьків

Я знаю, що минув час з моменту виникнення питання, але я знайшов просте рішення і подумав, що хтось може його використати (вибачте за погану англійську мову). Ось це іде:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

Простий приклад. Зауважте, що ви можете перетворитись на чуйність.

Моє рішення:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

Існує трохи суперечності в назві питання та змісті. Заголовок говорить про батьків-діві, але в питанні звучить так, що ви хочете, щоб два діви-брати (навігація та вміст) були однакової висоти.

Ви (а) хочете, щоб і навігація, і вміст були на 100% висотою основного, або (б) хочете, щоб навігація та контент були однакової висоти?

Я припускаю, що (б) ... якщо це так, я не думаю, що ви зможете це зробити, враховуючи поточну структуру сторінки (принаймні, не з чистим CSS і ніяким сценарієм). Ймовірно, вам потрібно буде зробити щось на кшталт:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

і встановіть вміст div, щоб мати лівий запас незалежно від ширини панелі навігації. Таким чином, вміст вмісту знаходиться праворуч від навігації, і ви можете встановити поділ навігації на 100% від висоти вмісту.

EDIT: Я це роблю повністю в голові, але вам, ймовірно, також потрібно буде встановити ліве поле навігаційного дива на негативне значення або встановити абсолютне ліве значення 0, щоб повернути його в крайній лівий бік. Проблема полягає в тому, що існує багато способів усунути це, але не всі вони будуть сумісні з усіма браузерами.

[Посилаючись на менший код Dmity в іншій відповіді] Я здогадуюсь, що це якийсь "псевдо-код"?

З того, що я розумію, спробуйте скористатися технікою штучних стовпців, яка повинна зробити трюк.

http://www.alistapart.com/articles/fauxcolumn/

Сподіваюся, це допомагає :)

Цей трюк спрацьовує: додавання останнього елемента у свій розділ HTML із стилем чіткого: обидва;

    <div style="clear:both;"></div>

Все до цього буде включено у висоту.

давання position: absolute;дитині працював у моєму випадку

Ви використовуєте CSS Flexbox

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

Ця відповідь вже не є ідеальною, оскільки флешбокс та сітка CSS, де вони реалізовані для CSS. Однак це все ще є робочим рішенням

На меншому екрані ви, ймовірно, хочете зберегти автоматичну висоту, оскільки col1, col2 і col3 укладаються один на одного.

Однак після точки розриву медіа-запиту ви хочете, щоб cols з’являлися поруч з однаковою висотою для всіх стовпців.

1125 px - це лише приклад точки розриву ширини вікна, після якої ви хочете, щоб усі стовпці встановили однакову висоту.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

Звичайно, ви можете встановити більше точок прориву, якщо вам потрібно.

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

У мене був той самий випуск, він працював на основі відповіді Хакама Фостока, я створив невеликий приклад, в деяких випадках він може працювати, не додаючи display: flex;і flex-direction: column;на батьківський контейнер

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

Як показано раніше, flexbox є найпростішим. напр.

#main{ display: flex; align-items:center;}

це вирівняє всі дочірні елементи до центру всередині батьківського елемента.

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

Від:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

повідомляє bootstrap, але для його використання вам не потрібен завантажувальний. Відповідаючи на це старе запитання, оскільки це працювало для мене, і здається досить простим у виконанні.

Це була та сама відповідь, яку я і на це запитання

Тут стара модна демонстрація на основі position: absoluteконтейнера вмісту та position: relativeбатьківського контейнера.

Щодо сучасного способу зробити це - гнучкі коробки найкращі.

Найпростіший спосіб зробити це - просто підробити це. Список Апарт висвітлював це широко протягом багатьох років, як у цій статті «Дена Седерхольма» від 2004 року .

Ось як я зазвичай це роблю:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

Ви можете легко додати заголовок до цього дизайну, загорнувши #container в інший розділ, вставивши заголовок div як братів # контейнера та перемістивши стилі поля та ширини у батьківський контейнер. Крім того, CSS слід перемістити в окремий файл, а не зберігати в рядку тощо. Нарешті, клас clearfix можна знайти на позиціонуванні всіх речей .