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％導致溢出問題

回答

相關問題