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

Question

У меня есть сайт со следующей структурой:

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

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

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

Навигация находится слева, а раздел содержимого - справа. Информация для div содержимого извлекается через PHP, поэтому каждый раз она меняется.

Как я могу масштабировать навигацию по вертикали, чтобы ее высота соответствовала высоте содержимого div, независимо от того, какая страница загружена?

Answer 1

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

Вы можете указать 100% для html и body элементов, как было указано ранее @Travis, чтобы высота страницы каскадно доходила до ваших узлов.

Answer 2

На основе метода, описанного в этой статье Я создал. Менее динамическое решение:

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

Answer 3

Добавить display: grid к родителю

Answer 4

Мое решение:

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

Answer 5

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

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>

Простой пример. Обратите внимание, что вы можете превратиться в отзывчивость.

Answer 6

Этот ответ больше не идеален, так как CSS flexbox и grid реализованы в CSS. Однако это все еще рабочий раствор

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

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

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>

Answer 7

Вы используете 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>

Answer 8

[Ссылаясь на код Dmity's Less в другом ответе] Я предполагаю, что это своего рода «псевдокод»?

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

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

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

Answer 9

Существует небольшое противоречие в названии вопроса и его содержании. Название говорит о родительском div, но вопрос заставляет его звучать так, как будто вы хотите, чтобы два родственных div (навигация и контент) были одинаковой высоты.

Желаете ли вы (а), чтобы навигация и контент были на 100% выше основной, или (б) хотите, чтобы навигация и контент были на одной высоте?

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

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

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

РЕДАКТИРОВАТЬ: я делаю это полностью в моей голове, но вам, вероятно, также потребуется установить левое поле навигационного элемента в отрицательное значение или установить его абсолютное левое значение равным 0, чтобы переместить его обратно в крайнее левое положение. Проблема в том, что есть много способов сделать это, но не все они будут совместимы со всеми браузерами.

Answer 10

Этот трюк работает: добавление последнего элемента в ваш раздел HTML со стилем ясно: оба;

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

Все до этого будет включено в высоту.