Question

我最近决定抛弃表并在这个新项目中使用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;">&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，这不应该发生！任何帮助将不胜感激。谢谢！

Answer 1

你在黑色div上指定了100％的高度，最终相对于它的父级（.mid），它也恰好包含你给出90px高度的其他元素。你必须考虑到这两个兄弟姐妹。

您可以使用calc()表示法执行此操作，但移动浏览器支持较差且IE8＆amp;下方。

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

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

http://jsfiddle.net/yrfnc/

Answer 2

你有什么理由不能将overflow：hidden添加到“.mid”div？

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

或

.mid {
    float: left;
    width: 998px;
    height: 100%;
    background-color: yellow;
    overflow: hidden;
}

Answer 3

这应该可以解决问题

height: 100vh;

Div高度100％导致溢出问题

3 个答案: