Div高度100％导致溢出问题-Java 学习之路

我最近决定抛弃表并在这个新项目中使用div解决方案，但是当我将另一个div中的div设置为100％而没有导致溢出等于其上方div的高度时，我有一个非常奇怪的问题 . 它的行为就像浏览器不知道占据该空间的div高于它 .

我有一个包装div，其固定宽度和高度设置为100％，在中间列中有3列div（左，中，右）我有3 div 's, the top 2 have fixed heights 90px and the 3rd is set to 100% to fill the rest of the content area but it' s突破包装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，这不应该发生！任何帮助将不胜感激 . 谢谢！

2 回答

0

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

您可以使用calc()表示法执行此操作，但移动浏览器支持不良并且IE8及以下版本不支持该功能 .

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

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

http://jsfiddle.net/yrfnc/

回复于 2024-04-29T08:00:45+08:00

有什么理由你不能只是添加溢出：隐藏到“.mid”div？

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

要么

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

回复于 2024-04-29T08:00:45+08:00

Div高度100％导致溢出问题

2 回答

相关问题