div在另一個div（css定位）

這應該是一個非常簡單的。我需要'橙色'div始終覆蓋100％寬度和100％高度。div在另一個div（css定位）

在那個div中，我需要'綠色'div來填充它的父母的'寬度和高度'，'orange'div的100％。

此外，在'橙色'div內需要總是有10px的'padding'。

當窗口被調整大小時，每個div都必須分別調整大小，以便沒有滾動條。

http://jsfiddle.net/URwpA/3/

來源

2012-04-11 captainrad

橙色的div不能有填充，如果你想綠色的div完全填充。 – 2012-04-11 20:26:19

如何在兩者之間保持恆定的10px可能是一個更好的問題。 – captainrad 2012-04-11 20:29:19

你需要使用哪些瀏覽器？ – Marko 2012-04-11 20:32:04

第一種方式：

#hold { 
position:absolute; 
top:0px; 
left:0px; 
bottom:0px; 
right:0px; 
background:orange; 
padding:10px; 
} 
#held { 
position:relative; 
width:100%; 
height:100%; 
background:green; 
}

方式二：

#hold { 
position:absolute; 
top:0px; 
left:0px; 
bottom:0px; 
right:0px; 
background:orange; 
} 
#held { 
position:absolute; 
top:10px; 
left:10px; 
bottom:10px; 
right:10px; 
background:green; 
}

編輯：我能想到的只有這樣才能達到一個佈局，我認爲被請求的評論是如下所示：

<html style="height: 100%;"> 
    <body style="height: 100%;"> 
    <table style="height: 100%; width: 100%; border: 10px solid orange; background-color: green;"> 
     <!-- etc... --> 
    </table> 
    </body> 
</html>

來源

2012-04-11 20:34:31 Neil

完美，謝謝先生！ – captainrad 2012-04-11 20:36:35

可以用一個table元素做同樣的事情，而不將其內容泄漏到wrapper div之外嗎？ – captainrad 2012-04-11 20:55:01

@captainrad我想我可能需要看一個更新的小提琴來理解你的意思。 – Neil 2012-04-11 21:05:53

我相信你正在尋找這樣的事情？

#hold { 
position:fixed; 
background:orange; 
width:100%; 
height:100%; 
padding:10px; 
} 
#held { 
position:relative; 
width:100%; 
height:100%; 
background:green; 
}

來源

2012-04-11 20:31:31 moose

我需要填充在右側以及底部。這在我的Chrome或Firefox中沒有顯示出來。 – captainrad 2012-04-11 20:33:48

div在另一個div（css定位）

回答

相關問題