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

【问题标题】：How to force child div to be 100% of parent div's height without specifying parent's height?如何在不指定父级高度的情况下强制子级 div 为父级 div 高度的 100%？
【发布时间】：2010-11-10 11:29:11
【问题描述】：

我有一个结构如下的网站：

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

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

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

导航在左侧，内容 div 在右侧。 content div的信息是通过php拉进来的，所以每次都不一样。

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

【问题讨论】：

在父级上使用显示表格并在子级上显示表格单元格。这将使孩子只要父母是。见stackoverflow.com/q/22712489/3429430
你可以只为 div#main 设置display: flex; align-items: stretch;。不要使用height: 100%作为div#content

标签： html css

【解决方案1】：

我可能有点晚了，但我找到了一个可能有点破解的解决方法。首先给父母一个 flex 和 100vh 的高度

类似这样的：

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;/* Can be less depends on the container, basically this forces the element to expand */
}

【讨论】：

【解决方案2】：

对于 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.
}

这是我正在做的事情：

【讨论】：

【解决方案3】：

对我有用的是添加 style={{ display: 'flex', overflowY: "auto" }} 给孩子的所有父母，然后 style={{ overflowY: "auto" }} 给孩子自己。

【讨论】：

【解决方案4】：

对于父母：

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>

【讨论】：

IE11 不能很好地配合 flexbox 和 heights。点击此处的“已知问题”：caniuse.com/#feat=flexbox
@SuperUberDuper 好吧，你可以在 bootstrap 中使用它：jsfiddle.net/prdwaynk 但如果我是你，我会使用支持 flexbox 的生产环境的基础：foundation.zurb.com/sites/docs/xy-grid.html BS4 也会有 Flexbox，但是它仍处于 alpha 阶段，我认为无论如何基础更好。
如果您使用的是align-items: center，那么您需要拉伸的项目需要align-self: normal
这不是一个正确的答案，因为这需要设置父高度。问题是“没有指定父母的身高？”。
@Aiphee downvoting 因为您似乎没有在原始问题文本中看到关于不必设置父母身高的部分，但您的“解决方案”确实如此正是这样。

【解决方案5】：

height : <percent> 仅在顶层具有指定高度百分比且以像素、ems 等为单位的固定高度的所有父节点时才有效。这样，高度将向下层叠到您的元素。

您可以将 100% 指定为 html 和 body 元素，如 @Travis 前面所述，以使页面高度向下级联到您的节点。

【讨论】：

【解决方案6】：

我遇到了同样的问题，它根据 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

【讨论】：

【解决方案7】：

这个答案不再理想，因为 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>

【讨论】：

【解决方案8】：

你使用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>

【讨论】：

【解决方案9】：

我的解决方案：

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

【讨论】：

【解决方案10】：

将position: absolute; 给在我的案例中工作的孩子

【讨论】：

【解决方案11】：

将display: grid 添加到父级

【讨论】：

【解决方案12】：

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

style = "height:100%;"

在子 div 上

并为父母申请此

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

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

【讨论】：

我必须删除 flex-direction: column; 才能为我工作。

【解决方案13】：

这个技巧确实有效：在你的 HTML 部分添加一个最终元素具有明确的风格：两者；
    <div style="clear:both;"></div>
在此之前的所有内容都将包含在高度中。

【讨论】：

【解决方案14】：

.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

states bootstrap 但你不需要 bootstrap 来使用它。回答这个老问题，因为这对我有用，而且似乎很容易实现。

这与我提供给Question的答案相同

【讨论】：

【解决方案15】：

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

我建议你看看Equal Height Columns with Cross-Browser CSS and No Hacks。

基本上，以与浏览器兼容的方式使用 CSS 执行此操作并非易事（但对于表格来说是微不足道的），因此请为自己找到一个合适的预打包解决方案。

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

【讨论】：

这看起来是一个不错的解决方案，直到您绘制边框 border:1px solid blue 例如在container2 上：蓝色边框位于前两列，而不是您所期望的仅位于第二列。
@bfritz，更好的解决方案是使用display:table

【解决方案16】：

如前所述，flexbox 是最简单的。例如。

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

这会将所有子元素对齐到父元素的中心。

【讨论】：

这没有回答问题，他们想要相等的高度，而不是使内容居中

【解决方案17】：

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

【讨论】：

MS 自己不再支持它了，如果这有助于任何人说服他们的客户......
这应该是公认的答案。时代变了，这个答案适用于all browsers（在 Safari 5.1.17 中有小怪癖）。两行 CSS，您立即获得您想要的效果，没有我能想到的缺点。
提升这个答案。小伙子们，把你的背放在里面！
这是最好的答案。是的，我们可以制作一个表格来执行此操作，但它不是表格数据，而是我们将 div 视为表格单元格......太棒了！
这实际上让我在不同的情况下朝着正确的方向前进。如果有人在努力使用 Firefox 或 Edge 中的 flex 容器的方形 div，请记住将 :before 元素设置为 display: table。不要问我为什么，但它可以解决它。

【解决方案18】：

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

看this example。

【讨论】：

这正是我正在做的，想添加一个答案。我也在使用height: 100%，但事实证明它不需要。
现代网站不推荐使用 CSS 布局的表格

【解决方案19】：

我知道自从提出问题以来已经过了很长时间，但我找到了一个简单的解决方案，并认为有人可以使用它（抱歉英语不好）。就是这样：

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>

简单的例子。请注意，您可以转化为响应能力。

【讨论】：

哦，我忘了：如果你想把.sidebar的内容居中对齐，把“vertical-align: top”改成“vertical-align: middle”就行了。

【解决方案20】：

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

【讨论】：

我必须说我一直在寻找这种解决方案。死的简单，如此明显，以至于没有人想出来。恭喜@Roman！
非常感谢！我也认为这是我的许多类似 CSS 问题的 goto 解决方案，其中使用溢出和百分比宽度/高度限制在区域内的元素经常推动外部布局 - 这一切显然是由于底部边距。

【解决方案21】：

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

margin-bottom: 100%;

【讨论】：

或 padding-bottom: 100%;它并不精确，但在某些情况下效果很好。
padding-bottom 在我的情况下可以解决问题。这个解决方案与@Roman Kuntyi 发布的非常相似。

【解决方案22】：

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

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

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

希望这会有所帮助:)

【讨论】：

根据答案的排序顺序，很难说出“this”指的是什么......我猜它是关于 Dmitry 的代码。因此，此评论属于他的答案下方的评论！而且，为了您的信息，它不是伪代码，它是 Less 语言的代码，一种以程序方式定义 CSS 的方式。

【解决方案23】：

基于此article 中描述的方法，我创建了.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;
            }
        }
    }
}

【讨论】：

【解决方案24】：

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

【讨论】：

Math.max() 将成为您的朋友。
无法让 CSS 在所有情况下都能正常工作，我真的只需要快速修复。这可能不是最标准的方法，但它做得很好。谢谢！ :-]
使用 JQuery 的css 函数时，您无法像使用纯 CSS 解决方案时那样区分屏幕媒体和打印媒体。因此，您可能会遇到打印问题。

【解决方案25】：

问题的标题和内容有点矛盾。标题提到了父 div，但这个问题听起来像是您希望两个兄弟 div（导航和内容）具有相同的高度。

您是 (a) 想要导航和内容的高度都为 main 的 100%，还是 (b) 想要导航和内容的高度相同？

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

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

并将内容 div 设置为具有与导航窗格宽度相同的左边距。这样，内容的内容就在导航的右侧，您可以将导航 div 设置为内容高度的 100%。

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

【讨论】：

【解决方案26】：

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

否则还有faux-columns 技术。

【讨论】：

非常感谢，你拯救了我的一天。不知道可以同时定义顶部和底部，它会以这种方式工作。
这将使容器的内容停止调整它的大小。
+1 因为它专门解决了 OP 的问题 “如何在不指定父母身高的情况下强制子 Div 为父母 Div 的 100%？” 我的问题不需要列（在问题详细信息中提到但在主标题中没有提到），而是一个 div 在另一个 div 后面。此答案适用于两种应用程序。

【解决方案27】：

最简单的方法就是伪造它。多年来，A List Apart 对此进行了广泛的报道，like in this article from Dan Cederholm from 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 应该被移动到一个单独的文件中，而不是保持内联等。最后，可以在positioniseverything 上找到 clearfix 类。

【讨论】：

【解决方案28】：

这是设计师一直在处理的一个令人沮丧的问题。诀窍是您需要在 CSS 中将 BODY 和 HTML 的高度设置为 100%。

html,body {
    height:100%;
}

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

【讨论】：

除非它并不总是有效，例如，如果您在绝对定位元素中有一个相对定位元素，它不再强制 hasLayout。
另外，如果您想摆脱窗口右侧的滚动条（出现在 Firefox v28 中），请给窗口一些喘息的空间：html { height: 100%; } body { height: 98%; }。
这只有在所有父母的身高都为100%的情况下才有效，仅设置html和body是不够的，所有父母都必须定义一个高度。
我同意你的观点，但这似乎是在回答一个不同的问题。 OP是否在谈论整个页面？现在读取的方式，它看起来只是父元素高度的 100%，这可能不是页面或视口。
不适用于普通的div