Html 如何使 div 与父级高度相同（显示为表格单元格）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22712489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make div same height as parent (displayed as table-cell)
提问by Chris
I got a container div containing three child divs (vary in content) - each as tall as the tallest one. I managed this by setting the container to display:table and the child divs to display:table-cell etc.
我得到了一个包含三个子 div（内容不同）的容器 div - 每个都和最高的一样高。我通过将容器设置为 display:table 并将子 divs 设置为 display:table-cell 等来管理这个。
Everything worked just fine, until...
一切正常，直到...
I inserted a new div inside one of the child divs and tried to make it height:100% - so it would stretch to the same height as its parents, but that did not work.
我在其中一个子 div 中插入了一个新 div 并尝试使其高度：100% - 这样它就会拉伸到与其父级相同的高度，但这不起作用。
Please see my JSFiddle: http://jsfiddle.net/bkG5A/
请看我的 JSFiddle：http: //jsfiddle.net/bkG5A/
Any help would be greatly appreciated!
任何帮助将不胜感激！
HTML
HTML
<div class="container">
<div class="child">
a<br />a<br />a
</div>
<div class="child">
a<br />a<br />a<br />a<br />a<br />a<br />a
</div>
<div class="child">
<div class="content">
a<br />a<br />a
</div>
</div>
</div>
CSS
CSS
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
height: 100%;
background-color: blue;
}
回答by reinder
Another option is to set your child div to display: inline-block;
另一种选择是将您的孩子 div 设置为 display: inline-block;
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}<div class="container">
<div class="child">
a
<br />a
<br />a
</div>
<div class="child">
a
<br />a
<br />a
<br />a
<br />a
<br />a
<br />a
</div>
<div class="child">
<div class="content">
a
<br />a
<br />a
</div>
</div>
</div>回答by King King
You have to set the heightfor the parents (container and child) explicitly, here is another work-around (if you don't want to set that height explicitly):
您必须height为父母（容器和孩子）明确设置，这是另一种解决方法（如果您不想明确设置该高度）：
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
position:relative;
}
.content {
position:absolute;
top:0;
bottom:0;
width:100%;
background-color: blue;
}
回答by Tom Spee
回答by drew7721
The child can only take a height if the parent has one already set. See this exaple : Vertical Scrolling 100% height
如果父母已经设置了一个高度，孩子只能采取一个高度。请参阅此示例：垂直滚动 100% 高度
html, body {
height: 100%;
margin: 0;
}
.header{
height: 10%;
background-color: #a8d6fe;
}
.middle {
background-color: #eba5a3;
min-height: 80%;
}
.footer {
height: 10%;
background-color: #faf2cc;
}
$(function() {
$('a[href*="#nav-"]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});html,
body {
height: 100%;
margin: 0;
}
.header {
height: 100%;
background-color: #a8d6fe;
}
.middle {
background-color: #eba5a3;
min-height: 100%;
}
.footer {
height: 100%;
background-color: #faf2cc;
}
nav {
position: fixed;
top: 10px;
left: 0px;
}
nav li {
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav>
<ul>
<li>
<a href="#nav-a">got to a</a>
</li>
<li>
<a href="#nav-b">got to b</a>
</li>
<li>
<a href="#nav-c">got to c</a>
</li>
</ul>
</nav>
<div class="header" id="nav-a">
</div>
<div class="middle" id="nav-b">
</div>
<div class="footer" id="nav-c">
</div>