如何將DIV放置在另一個DIV中，使DIV上方和下方的空間相等？

我有以下HTML：如何將DIV放置在另一個DIV中，使DIV上方和下方的空間相等？

<div id="outer"> 
    <div class="content left"></div> 
    <div class="content right"> 
     <div class="fill"> 
      <div class="blue"> 
      xxx <br> xxx 
      </div> 
    </div> 
</div>

CSS：

body, html { height: 100%; } 
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } 
.content { position:absolute; width:50%; height:100%; } 
.content.left { background-color:yellow; } 
.content.right { background-color:red; left:50%; } 
.fill { padding: 2em; background-color: green; height: 100%;} 
.blue { background-color: blue; }

Fiddle

我怎樣才能使這樣的上方和下方的藍色DIV的空間是相同的高度？

來源

2013-01-08 Melina

我會用百分數。假設添加'.blue {background-color：blue;身高：90％;保證金：5％0; }' – Morpheus

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – Vucko

http://stackoverflow.com/questions/13663181/position-absolute-width-unknown-how- to-center-div –

以下應爲你工作：

.blue { 
    position:absolute; 
    top:50%; 
    background-color: blue; 
}

這裏是爲垂直對齊的內容很好的參考Link

來源

2013-01-08 14:33:30 Malkus

只有空的div纔會以您的解決方案爲中心;） – Morpheus

[示例]（http://tinkerbin.com/LSSVwhbH） – Malkus

問題：「我怎樣才能使它成爲上下空間藍色的DIV是一樣的高度？「你讀過了嗎？ – Morpheus

正在甌問這個，因爲你沒有看到你所期望的或監守你不知道如何編程？我在問這是因爲你忘了關閉「填充」DIV。

如果這不是您的問題，請嘗試將位置分配給絕對位置。

.blue{ 
    position: absolute; 
    background-color: blue; 
    padding: 10px; 
}

來源

2013-01-08 14:37:15

對不起，但你的回答沒有任何意義。我需要做的是在藍色div上方具有與藍色div相同數量的垂直空間。我不確定你爲什麼要把它定位爲絕對:-( – Melina

如何將DIV放置在另一個DIV中，使DIV上方和下方的空間相等？

回答

相關問題