Div高度100％导致溢出问题

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

我有一个固定的宽度和高度设置为100％的包装div，内部是3列div（左，中，右）在中间列我有3个div，顶部2有固定高度90px和第三个设置为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是打破了黄色（MID）DIV的，这不应该发生！任何帮助将不胜感激。谢谢！

来源

2013-06-19 bfritz

这是表的解决方案是什么样子的我想要做的事： <表样式= “宽度：100％;高度：100％;”> \t \t \t \t \t \t \t \t \t \t \t \t 为什么是div方法更难吗？ – bfritz

http://jsfiddle.net/KtUgF/7/ –

@MarcoGeertsma我没有看到有关该小提琴的更新？ – bfritz

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

您可以通过使用calc()表示法来实现此操作，尽管移动浏览器支持不好，并且该功能在以下IE8 &中不受支持。

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

您也可以使用黑色DIV负顶边距等于它的两个兄弟姐妹的总和（180像素）：

http://jsfiddle.net/yrfnc/

来源

2013-06-19 00:37:30 Adrift

感谢Adrift的反应，不幸的是我需要IE8的支持，并且最高边缘设置感觉像是一件非常简单的事情（我会想）。这黑色的div发生在主要内容区域，所以一旦我开始填充数据，我将不得不填充所有的下+ 180像素来抵消负顶部边距设置。 – bfritz

然后你需要使用JS或重新考虑你的布局 – Adrift

任何原因，你可以”只需添加溢出：隐藏到“.mid”div？

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

或

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

来源

2013-06-19 01:01:28 LouD

这里是更新的小提琴： http://jsfiddle.net/LfzSq/ – LouD

因为那个区域是我的MAIN内容div。我需要在其中放置很多其他UI。通过简单地设置溢出隐藏我会隐藏我的内容！我需要它对屏幕上的实际空间是真实的，因此即使需要它也可以垂直扩展，而不是在div内部滚动。 – bfritz

然后你仍然需要填充，因为你提到的负边距技巧。如果您不希望黑色的div与其父母的高度相同，则应删除100％的高度。如果您的目标是设计黄色div的左半边，那么总有其他方法可以实现（即使使用背景图像）。 – LouD

Div高度100％导致溢出问题

回答

相关问题