我最近决定在这个新项目上放弃表并使用div解决方案，但是当将另一个div中的div设置为100％而不会引起等于上面div高度的溢出时，我遇到了一个非常奇怪的问题它。它的作用就像浏览器不知道它上方的div占用了那个空间。
我有一个固定宽度和高度设置为100％的包装div，其中中间一列是3列div（左，中和右），我有3 div，前2个具有固定高度90px，第3个设置为100％以填充内容区域的其余部分，但它超出了包装div并导致180px的溢出。我在JSFiddle上设置了这个简单的布局：Height: 100% Div Issue
<body>
<div class="wrapper">
<div class="left">
<div style="background-color:fuchsia; height: 90px;"> </div>
</div>
<div class="mid">
<div style="background-color:purple; height: 90px; width: 998px;"> </div>
<div style="background-color:blue; height: 90px; width: 998px;"> </div>
<div style="background-color:black; height: 100%; width: 50%;"> </div>
</div>
<div class="right">
<div style="background-color:fuchsia; height: 90px;" class="right"> </div>
</div>
</div>
[您会注意到黑色div正在脱离黄色（中）div，这不应该发生！任何帮助将不胜感激。谢谢！
.mid）而言，该父级也恰好包含您给高度设置90px的其他元素。您必须考虑到这两个兄弟姐妹。[您可以使用calc()表示法来执行此操作，尽管移动浏览器支持不佳，并且IE8及以下版本不支持该功能。
calc()
您还可以在黑色div上使用等于其两个同级值之和（180px）的负的上边距：
或
<div class="mid" style="overflow:hidden">
.mid {
float: left;
width: 998px;
height: 100%;
background-color: yellow;
overflow: hidden;
}