如何强制子div为父div的高度的100%而不指定父级的高度？

Question

我有一个具有以下结构的网站:

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

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

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

导航位于左侧,内容div位于右侧.内容div的信息通过PHP引入,因此每次都不同.

我如何垂直缩放导航,使其高度与内容div的高度相同,无论加载哪个页面？

Answer 1

对于父母:

display: flex;

你应该添加一些前缀,http://css-tricks.com/using-flexbox/.

编辑:正如@Adam Garner所说,align-items: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>

Answer 2

注意:此答案适用于不支持Flexbox标准的旧版浏览器.有关现代方法,请参阅:https://stackoverflow.com/a/23300532/1155721

我建议你看一下使用跨浏览器CSS和无黑客的Equal Height Columns.

基本上,使用CSS以浏览器兼容的方式执行此操作并非易事(但对于表格而言微不足道),因此请找到适合您的预打包解决方案.

此外,答案取决于您是想要100%高度还是相同高度.通常它的高度相等.如果它是100%高度,答案会略有不同.

Answer 3

这是一个令人沮丧的问题,一直与设计师打交道.诀窍是你需要在CSS中的BODY和HTML上设置高度为100%.

html,body {
    height:100%;
}

这个看似毫无意义的代码是为浏览器定义100%的含义.令人沮丧,是的,但这是最简单的方法.

Answer 4

我发现设置两列display: table-cell;而不是float: left;效果很好.

Answer 5

如果您不介意在意外短的内容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 */
}

另外还有人造柱技术.

Answer 6

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

Answer 7

使用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();
});

Answer 8

尝试将底部边距设为100%.

margin-bottom: 100%;

Answer 9

2021 年读者：

尝试这个：

.parent {
  position: relative;

  display: flex;                 // And you will probably need this too.
  flex-direction: row;           // or column.
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;

  align-self: center;            // And you will probably need this too.
}

这是我正在做的事情：

Answer 10

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

看看这个例子.

Answer 11

height : <percent>仅当您拥有指定百分比高度且在顶层具有固定高度(以像素,ems等为单位)的所有父节点时才会起作用.这样,高度将级联到您的元素.

您可以指定100%的html和body元素,如前面所述的@Travis,以使页面高度级联到您的节点.

Answer 12

经过长时间的搜索和尝试,没有解决我的问题,除了

style = "height:100%;"

关于儿童div

并为父母申请

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

另外,我正在使用bootstrap,这并没有破坏对我的响应.

Answer 13

添加display: grid到父级

Answer 14

基于本文中描述的方法,我创建了.Less动态解决方案:

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 15

你可以把display: flexto div#main, align-self: stretchto div#navigation。

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

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

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

// CSS file
#main {
  display: flex;
}

#navigation {
  align-self: stretch;
}