如何在不指定父级高度的情况下强制子级div为父级div的高度的100％？

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

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

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

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

导航在左侧，内容div在右侧。内容div的信息是通过PHP获取的，因此每次都不同。

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

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

我建议您看看使用Cross-Browser CSS和No Hacks的等高列。

基本上，以与浏览器兼容的方式使用CSS做到这一点并非微不足道（但对于表而言却微不足道），因此请为自己找到合适的预打包解决方案。

另外，答案取决于您是否要100％高度或相等高度。通常，它等于高度。如果高度为100％，答案会略有不同。

对于父母：

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>

这是一个始终困扰着设计师的令人沮丧的问题。诀窍是您需要在CSS中的BODY和HTML上将高度设置为100％。

html,body {
    height:100%;
}

这个看似毫无意义的代码是向浏览器定义100％的含义。令人沮丧，是的，但这是最简单的方法。

我发现将两列设置为display: table-cell;而不是float: left;很好。

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

另外，还有伪列技术。

#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>仅当所有父节点的指定百分比高度以及固定高度（以像素，ems等为单位）位于顶层时，该选项才起作用。这样，高度将逐步下降到您的元素。

您可以指定html和body元素的100％，如前面提到的@Travis一样，以使页面高度级联到您的节点。

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

style = "height:100%;"

在儿童div上

并为父母申请

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

另外，我正在使用引导程序，这并没有破坏我的响应速度。

在此基础上在所描述的方法的文章我已创建.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;
            }
        }
    }
}

添加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
    );
});

问题的标题和内容存在一些矛盾。标题说的是父级div，但这个问题听起来好像您希望两个同级div（导航和内容）的高度相同。

您（a）希望导航和内容都为main高度的100％，还是（b）希望导航和内容为相同高度？

我假设（b）...如果是这样，我认为在您当前的页面结构下，您将无法做到（至少不是纯CSS和脚本）。您可能需要执行以下操作：

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

并将content div设置为左侧边缘，无论导航窗格的宽度如何。这样，内容的内容在导航的右侧，您可以将导航div设置为内容高度的100％。

编辑：我完全在脑海中做到这一点，但是您可能还需要将导航div的左边界设置为负值，或者将其绝对左值设置为0才能将其推回最左边。问题是，有很多方法可以实现这一目标，但并非所有方法都将与所有浏览器兼容。

[在另一个答案中参考Dmity的Less代码]我猜这是某种“伪代码”吗？

据我了解，尝试使用应该可以解决问题的伪列技术。

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

希望这可以帮助 ：）

这个技巧确实有用：在您的HTML部分中以clear：both;样式添加一个final元素。

    <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 flexbox和grid已实现为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>

我遇到了同样的问题，它基于Hakam Fostok的回答而工作，我创建了一个小示例，在某些情况下，无需添加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，但您无需使用bootstrap即可使用。回答这个老问题，因为它对我有用，而且似乎很容易实现。

这是我对这个问题提供的答案

这里是基于position: absolute内容容器和position: relative父容器的老式演示。

至于现代的方式- 柔韧性盒是最好的。

最简单的方法是伪造它。多年来，List Apart对此进行了广泛的介绍，例如2004年Dan Cederholm的这篇文章。

这是我通常的做法：

<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应该移到一个单独的文件中，而不是内联等等。最后，可以在positioniseverything上找到clearfix类。