將div放在兩個不同尺寸的其他div元素下面

想要將底部（綠色）容器放置在左側和右側容器（紅色和藍色）下方，但仍將其放在主（黑色）容器內。無法讓它工作。有什麼建議麼？（jsfiddle）：將div放在兩個不同尺寸的其他div元素下面

<!DOCTYPE HTML> 
<html> 
<body> 

<div class="main_container"> 

    <div class="left_container"> 
    </div> 

    <div class="right_container"> 
    </div> 

    <div class="bottom_container"> 
    </div> 

</div> 

</body> 
</html>

CSS：

div.main_container { 
    background: #000; 
    border: none; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -khtml-border-radius: 15px; 
    border-radius: 15px; 
    width: 100%; 
    min-height: 400px; 
    margin: auto; 
    position: relative; 
} 

div.left_container { 
    float:left; 
    position:absolute; 
    width: 220px; 
    background: red; 
    margin: 0; 
    min-height: 100%; 
    padding: 0; 
} 

div.right_container { 
    position: relative; 
    margin-left: 220px; 
    width: 715px; 
    height: 100px; 
    background: blue; 
} 

div.bottom_container { 
    width: 100%; 
    height: 100px; 
    background: green; 
}

來源

2012-12-17 sooper

您的左容器設置爲最小高度：100％，那麼您如何期望將其置於其下？ –

我需要左側容器來填充高度的其餘部分，這是我需要解決的問題。有任何想法嗎？ – sooper

這應該將左容器的高度設置爲除100px之外的所有值，並將綠容器放在整個容器的底部。

div.bottom_container { 
    width: 100%; 
    height: 100px; 
    background: green; 
    position: absolute; 
    bottom: 0; 
} 
div.left_container { 
    position:absolute; 
    bottom: 100px; 
    top: 0; 
    width: 220px; 
    background: red; 
}

來源

2012-12-17 13:09:49 tiffon

我需要左邊的容器有一個流體高度，此時如果我將更多的內容放在左側容器中，它會被剪裁：http://jsfiddle.net/tWTsj/3/有什麼想法？ – sooper

你可能真的想要這樣的東西，使用'float：left;'和'clear：both;'：http://jsfiddle.net/tWTsj/4/ – tiffon

position:fixed; 
    bottom:0px;

在div.bottom_container添加這兩個屬性。希望你得到你所期望的

來源

2012-12-17 12:53:27

這會導致底部容器掉出主容器。 – sooper

將div放在兩個不同尺寸的其他div元素下面

回答

相關問題