垂直展開div

我有divs的簡單問題。我想創建一個覆蓋整個屏幕並將其放入其他兩個div（「A」和「B」）的大格（「容器」）。「A」的高度爲200像素，我希望「B」可以覆蓋左側圖片等剩餘空間。下面我粘貼我的代碼，但它不能正常工作，因爲「B」也在「容器」之外，就像右邊的圖片。有人知道如何展開「B」來覆蓋「容器」中的剩餘空間，就像左邊的圖片一樣？我會很感激答案。垂直展開div

What I want to get Result produced by my code

的index.html

<html> 
<head> 
<link rel=stylesheet href="style.css" type="text/css" media=screen> 
</head> 
<body> 
<div id="container"> 
    <div id="A">text</div> 
    <div id="B">text</div> 
</div> 
</body> 
</html>

的style.css

#container { 
    border-color: blue; 
    width: 100%; 
    height: 100%; 
} 

#A { 
    border-color: green; 
    height: 200px; 
    min-height: 200px; 
    max-height: 200px; 
} 

#B { 
    border-color: red; 
    height: 100%; 
    overflow: hidden; 
} 

#A, #B, #container { 
    border-style: solid; 
    border-size: 1px; 
}

來源

2012-11-05 mchrobok

http://jsfiddle.net/S27an/這裏它跑得非常不錯的，有什麼問題是這樣的？ – Selvamani

您可以使用「衝突的ABSOLU TE定位」的方法是這樣的：

http://jsfiddle.net/TjArZ/

#container { 
    border-color: blue; 
    width: 100%; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

#A { 
    border-color: green; 
    height: 200px; 
} 

#B { 
    border-color: red; 
    position:absolute; 
    top:204px; 
    bottom:0; 
    left:0; 
    right:0; 
} 

#A, #B, #container { 
    border-style: solid; 
    border-width: 4px; 
}

的基本思想是的div被拉伸到指定的座標。背景here on ALA。

來源

2012-11-05 14:09:32

嘗試：

#A { 
    border-color: green; 
    height: 200px; 
    position:relative; 
    top:0;left:0; 
} 

#B { 
    border-color: red; 
    overflow: hidden; 
    position:relative; 
    top:200px;left:0;bottom:0; 
}

來源

2012-11-05 14:06:38

你可以試試這個：

#container { 
border-color: blue; 
width: 100%; 
height: auto !important; 
height: 100%; 
} 

#A { 
border-color: green; 
height: 200px; 
min-height: 200px; 
max-height: 200px; 
} 

#B { 
border-color: red; 
height: 100%; 

} 

#A, #B, #container { 
border-style: solid; 
border-size: 1px; 
}

來源

2012-11-05 14:10:21

回答

相關問題