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

对于家长：

display: flex;

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

正如@Adam Garner 所说， align-items: stretch;不需要。它也适用于父母，而不是儿童。如果你想定义孩子的伸展，你可以使用 align-self。

.parent { 背景：红色；填充：10px；显示：弹性； } .other-child { 宽度：100px;背景：黄色；高度：150px；填充：0.5rem； } .child { 宽度：100px;背景：蓝色； }

---

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

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

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

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

---

这是设计师一直在处理的一个令人沮丧的问题。诀窍是您需要在 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 */
}

否则还有 faux-columns 技术。

---

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

---

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

查看this example。

---

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

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

---

尝试将下边距设为 100%。

margin-bottom: 100%;

---

经过长时间的搜索和尝试，除了

style = "height:100%;"

在儿童 div 上

并为父母申请这个

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

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

---

将 display: grid 添加到父级

---

基于此 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;
            }
        }
    }
}

---

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

这是我正在做的事情：

---

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

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

---

您使用 CSS Flexbox

.flex-container { 显示：弹性；背景颜色：DodgerBlue； } .flex-container > div { 背景颜色：#f1f1f1;边距：10px；填充：20px；字体大小：30px； }