2

我最近决定放弃表格并在这个新项目中使用 div 解决方案，但是当我将另一个 div 中的 div 设置为 100% 时我遇到了一个非常奇怪的问题，而不会导致溢出等于 div 上方的高度。它的行为就像浏览器不知道它上面的 div 占据了那个空间。

我有一个固定宽度和高度设置为 100% 的包装 div，其中中间列有 3 个列 div（左、中和右）我有 3 个 div，前 2 个有固定高度 90px，第 3 个被设置到 100% 以填充内容区域的其余部分，但它打破了包装 div 并导致正好 180px 溢出。我在 JSFiddle 上设置了这个简单的布局：高度：100% div 问题

<body>
<div class="wrapper">
    <div class="left">
        <div style="background-color:fuchsia; height: 90px;">&nbsp;</div>
    </div>
    <div class="mid">
        <div style="background-color:purple; height: 90px; width: 998px;">&nbsp;</div>
        <div style="background-color:blue; height: 90px; width: 998px;">&nbsp;</div>
        <div style="background-color:black; height: 100%; width: 50%;">&nbsp;</div>
    </div>
    <div class="right">
        <div style="background-color:fuchsia; height: 90px;" class="right">&nbsp;</div>
    </div>
</div>

您会注意到黑色 div 突破了黄色（中间）div，这不应该发生！任何帮助将不胜感激。谢谢！

4

3 回答 3

2

您在黑色 div 上指定了 100% 的高度，该高度最终相对于其父级 ( .mid) 也恰好包含您为其提供 90px 高度的其他元素。你必须考虑这两个兄弟姐妹。

您可以通过使用calc()符号来做到这一点，尽管移动浏览器支持不好并且 IE8 及以下版本不支持该功能。

http://jsfiddle.net/KtUgF/5/

您还可以在黑色 div 上使用负上边距，等于其两个兄弟的总和（180px）：

http://jsfiddle.net/yrfnc/

于 2013-06-19T00:37:30.137 回答
0

为什么不能只添加溢出：隐藏到“.mid” div 的任何原因？

<div class="mid" style="overflow:hidden">

或者

.mid {
    float: left;
    width: 998px;
    height: 100%;
    background-color: yellow;
    overflow: hidden;
}
于 2013-06-19T01:01:28.290 回答
0

这应该可以解决问题

height: 100vh;
于 2019-10-26T15:44:47.923 回答