如何使 div 与父级高度相同（显示为表格单元格）
Posted
技术标签:
【中文标题】如何使 div 与父级高度相同（显示为表格单元格）【英文标题】：How to make div same height as parent (displayed as table-cell) 【发布时间】：2014-05-07 21:28:22 【问题描述】：我有一个容器 div，其中包含三个子 div（内容不同）——每个子 div 都和最高的一样高。我通过将容器设置为 display:table 并将子 div 设置为 display:table-cell 等来管理这一点。
一切都很好，直到...
我在其中一个子 div 中插入了一个新 div，并尝试将其设置为 height:100% - 这样它就会拉伸到与其父级相同的高度，但这不起作用。
请看我的 JSFiddle：http://jsfiddle.net/bkG5A/
任何帮助将不胜感激！
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
.container
display: table;
.child
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
.content
height: 100%;
background-color: blue;
【问题讨论】：
【参考方案1】：另一种选择是将您的子 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>JSFiddle Demo
【讨论】：
有趣的是，这在 IE 10 和 FF 28 中不起作用（甚至我的解决方案在 IE 10 和 FF 中也不起作用），根本无法理解这 2 个浏览器。 我有同样的问题。显示表格不适用于所有浏览器。【参考方案2】：您必须为父母（容器和孩子）明确设置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;
Fiddle
【讨论】：
另外，我认为使用绝对定位来解决这个问题是个坏主意。 @Chris 不明白为什么它对你不起作用，我当然已经测试过了。而且一点也不坏，你可能根本不明白绝对定位是怎么工作的 您说得对，代码运行良好 - 由于 Firefox 中有一些糟糕的缓存，因此对我不起作用。但我仍然不相信绝对定位是一个好的解决方案。原因如下：jsfiddle.net/bkG5A/5 - 为 div 添加了填充。 @Chris 看起来绝对定位不太好在这种情况下我们必须处理table-cell 布局，我认为这很复杂。您实际上拥有的解决方案在 FireFox 28 和 IE 10 中不起作用（不确定您拥有哪些版本，但这些版本是最新版本）。唯一的解决方案是我们为container 和child 显式设置height（正如我在答案中提到的那样），它适用于Chrome、Opera 和FireFox，但不适用于IE 10（太奇怪了） ，这个问题虽然看起来很简单，但跨浏览器却很难解决。
是的，你完全正确。我同意这是一个非常简单的任务，但在 css 中很难解决。我想这毕竟必须在 JS 中解决？就像 jQuery.equalHeights 插件一样。【参考方案3】：
你可以使用这个 CSS：
.content
height: 100%;
display: inline-table;
background-color: blue;
JSFiddle
【讨论】：
效果很好 :) 但我更喜欢 reinders 解决方案，因为 div 已经在一个表中 - 然后它可能不是使它成为表中的表的最佳解决方案。【参考方案4】：如果父级已经设置了一个高度，那么子级只能获取一个高度。看到这个例子：Vertical Scrolling 100% height
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>【讨论】：
以上是关于如何使 div 与父级高度相同（显示为表格单元格）的主要内容，如果未能解决你的问题，请参考以下文章