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定位）

回答

相关问题