如何强制子div是100%的父div的高度没有指定父的高度？

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

我建议你看看具有跨浏览器CSS且无黑客的等高列。

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

另外，你想要100%的高度还是等高的答案是不同的。通常是等高的。如果是100%的高度，答案略有不同。

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

据我所知，尝试使用人造柱技术应该可以做到这一点。

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

希望有帮助：）

如果您不介意导航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 */
}

另外还有人造柱技术。

这是一个令人沮丧的问题，设计师一直在处理。诀窍是您需要在CSS中将BODY和超文本标记语言的高度设置为100%。

html,body {
height:100%;
}

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

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

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

我假设（b）……如果是这样，我认为根据您当前的页面结构（至少，不能使用纯CSS和没有脚本），您可能需要执行以下操作：

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

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

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

要做到这一点，最简单的方法就是伪造它。多年来，一个列表已经广泛报道了这一点，就像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>

您可以通过以下方式轻松地在此设计中添加标头：将#容器包装在另一个div中，将标头div嵌入为#容器的兄弟，并将边距和宽度样式移动到父容器中。此外，CSS应移动到单独的文件中，而不是保持内联等。最后，可以在位置就是一切上找到clear重塑类。

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

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

基于此文章中描述的方法，我创建了。较少的动态解决方案：

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

height : <percent>只有在顶层上所有具有指定百分比高度的父节点都具有固定高度（以像素、ems等为单位）的情况下才有效。这样，高度将向下级联到你的元素。

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

尝试使底部保证金100%。

margin-bottom: 100%;

对于家长：

display: flex;

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

正如@Adam Garner所指出的，不需要对齐项：拉伸；。它的用法也适用于父母，而不是孩子。如果你想定义孩子拉伸，你可以使用对齐自我。

.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>

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

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

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

超文本标记语言

<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>

简单的例子。请注意，您可以转换为响应性。

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

看看这个例子。

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

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

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

这个答案不再理想，因为CSS flexbox和网格在CSS中实现。然而，它仍然是一个可行的解决方案

在较小的屏幕上，您可能希望保持高度自动，因为col1，col2和col3彼此堆叠。

但是，在媒体查询断点之后，您希望各列相邻显示，所有列的高度相同。

1125像素只是窗口宽度断点的一个示例，之后您需要将所有列设置为相同的高度。

<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>

经过长时间的寻找和尝试，没有解决我的问题，除了

style = "height:100%;"

在儿童区

为家长应用此

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

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

我的解决方案：

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

.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来使用它。回答这个老问题，因为这对我很有效，并且似乎很容易实现。

这是我提供给这个问题的相同答案

这个技巧确实有效：在超文本标记语言部分中添加最后一个元素 #36825；的风格：两者都有；

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

在此之前的所有内容都将包含在高度中。

将display: grid添加到父节点

给孩子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>

我有同样的问题，它基于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

什么工作对我来说是添加 style=\{\{ display: 'flex', overflowY: "auto" }} 孩子的所有父母，然后 style=\{\{ overflowY: "auto" }} #36825；自己的孩子

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

这是我正在做的：

我可能有点晚了，但我发现了一个可能有点黑客的工作。 首先给父级一个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 */
}

以下代码提供了为scroll div设置最小高度的能力，并且仅使用flex就使其具有其父级的100%高度。

css：

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


.scroll {
overflow: auto;
flex: 1 0 50px;
}

超文本标记语言：

<div class="main">
<div class="scroll">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

这个代码很适合我

<html>
<body style="display: flex;">
<div style="position: absolute; width: 100%; height: 100%; background-color: aliceblue">
<table style="width: 100%; height: 100%;">
<tr>
<td style="width: 70%; background-color: green"></td>
<td style="background-color: red"></td>
</tr>
</table>
</div>
</body>

你可以把display: flex到div#main，align-self: stretch到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;
}