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

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



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



<div id="main">

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

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

</div>



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


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



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

697   24  

24 ответов:

Примечание: этот ответ применим к устаревшим браузерам без поддержки стандарта Flexbox. Современный подход см.:https://stackoverflow.com/a/23300532/1155721

Я предлагаю вам взглянуть на столбцы равной высоты с кросс-браузером CSS и без хаков.

в принципе, делать это с CSS в совместимом с браузером способе не тривиально (но тривиально с таблицами), поэтому найдите себе подходящий предварительно упакованный решение.

кроме того, ответ зависит от того, хотите ли вы 100% высоты или равна высоте. Обычно это равный рост. Если это 100% высота ответ немного отличается.

137  
2017-07-17 14:06:34

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

display: flex;

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

изменить: Как отметил @Adam Garner, align-items: stretch; не требуется. Его использование также для родителей, а не детей. Если вы хотите определить растяжку детей,вы используете align-self.

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

.child {  
  width: 100px;
  background: blue;
}
<div class="parent">
  <div class="child"></div>
</div>
459  
2018-05-11 14:26:24

это расстраивает вопрос, который имеет дело с дизайнерами все время. Хитрость заключается в том, что вам нужно установить высоту до 100% на теле и HTML в вашем CSS.

html,body {
    height:100%;
}

этот, казалось бы, бессмысленный код должен определить браузеру, что означает 100%. Неприятно, да, но это самый простой способ.

94  
2009-07-14 01:22:10

Я считаю, что установка двух столбцов в display: table-cell; вместо float: left; работает хорошо.

90  
2015-11-09 23:36:32

Если вы не возражаете, что навигационный div обрезается в случае неожиданно короткого контента div, есть по крайней мере один простой способ:

#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 */
}

в противном случае есть лже-столбцы техника.

52  
2009-07-14 01:30:14 
#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}
29  
2014-08-06 18:23:20

С помощью 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();
});
15  
2011-07-12 05:54:44

попробуйте сделать нижний край 100%.

margin-bottom: 100%;
10  
2013-12-29 17:59:43 
#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

посмотреть .

9  
2015-05-29 02:14:45

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

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

8  
2013-06-04 17:40:31

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

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;
            }
        }
    }
}
6  
2012-09-20 23:59:39

после долгих поисков и попыток, ничего не решило мою проблему, кроме

style = "height:100%;"

на детей div

и для родителя применить это

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

кроме того, я использую bootstrap, и это не повредило отзывчивый для меня.

6  
2018-03-03 15:45:15

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

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>

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

2  
2014-10-29 13:57:25

в проекте RWD лучше всего было бы использовать jQuery. Для небольшого экрана вы, вероятно, захотите сохранить высоту авто, поскольку 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() {
            if (window.innerWidth>= 1125) {
              $('.col1').height($('.wraper').height());
              $('.col2').height($('.wraper').height());
              $('.col3').height($('.wraper').height());
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>
2  
2018-01-08 19:25:15

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

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

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

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

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

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

1  
2009-07-14 01:32:11

[ссылаясь на меньший код Дмитрия в другом ответе] я предполагаю, что это какой-то "псевдокод"?

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

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

надеюсь, что это помогает :)

1  
2013-08-05 20:07:56

дав position: absolute; чтобы ребенок работал в моем случае

1  
2018-03-27 03:14:45

мое решение:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});
1  
2018-04-20 12:31:12

вы используете 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>
1  
2018-07-08 02:23:09

как показано ранее, flexbox является самым простым. например. 

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

Это позволит выровнять все дочерние элементы по центру внутри родительского элемента.

0  
2015-11-11 19:13:47 
.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, но вам не нужно bootstrap, чтобы использовать это. Отвечая на этот вопрос, как это работало для меня, и, кажется, довольно легко осуществить.

Это был тот же ответ, который я дал этому вопрос

0  
2017-10-11 02:09:19

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

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

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

0  
2018-02-21 13:35:55

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

0  
2018-03-06 19:30:27

самый простой способ сделать это-просто фейк. Список отдельно охватывает это широко на протяжении многих лет,как в этой статье от Dan Cederholm с 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, встраивая заголовок div в качестве брата #container и перемещая стили полей и ширины в родительский контейнер. Кроме того, CSS должен быть перемещен в отдельную файл и не хранится в строке и т. д. так далее. Наконец, класс clearfix можно найти на positioniseverything.

-3  
2009-07-14 01:27:49

Comments

    Ничего не найдено.
Click here to cancel reply.