这是一个示例，如果 div 是使用最小高度的 body 的子元素，我希望它能正常工作:
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
}
.outer-wrap{
min-height: 100%;
}
.table-layout{
display: table;
min-height: 100%;
width: 100%;
}
.table-cell{
display: table-cell;
width: 50%;
padding: 2%;
}
.blue{
background: #55a;
}
.grey{
background: #bbb;
}
</style>
</head>
<body>
<div class="outer-wrap">
<div class="table-layout">
<div class="table-cell blue">
test
</div>
<div class="table-cell grey">
content<br />
<br />
content<br />
<br />
content<br />
<br />
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/OjxmGj
但是，当我添加一个带有 min-height:100% 的外部 div 时；内部 div 不再填充主体的高度:
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
}
.outer-wrap{
min-height: 100%;
}
.table-layout{
display: table;
min-height: 100%;
width: 100%;
}
.table-cell{
display: table-cell;
width: 50%;
padding: 2%;
}
.blue{
background: #55a;
}
.grey{
background: #bbb;
}
</style>
</head>
<body>
<div class="table-layout">
<div class="table-cell blue">
test
</div>
<div class="table-cell grey">
content<br />
<br />
content<br />
<br />
content<br />
<br />
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/JyrNVj
更新整个布局以使其正常工作对我来说并不实际，所以我希望有另一种方法可以在不删除外部 div 的情况下使它正常工作。
最佳答案
关于html - 如何使内部 div 至少匹配 body 的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45674417/