一个div内嵌在另一个div中（css定位）

Question

一个div内嵌在另一个div中（css定位）

htmlcsspositioncss-position

3

这应该是一个非常简单的问题。我需要 'orange' div 始终覆盖 100% 的宽度和 100% 的高度。

在该 div 中，我需要 'green' div 也填充其父元素 'orange' div 的 100% 宽度和高度。

此外，'orange' div 内部始终需要有 10px 的 'padding'。

当窗口大小调整时，每个 div 必须相应地 '调整大小'，以便没有滚动条。

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

- captainrad

如果您想让绿色div完全填充，橙色div不能有padding。 - Ash Burlaczenko

如何在两者之间保持10像素的恒定距离可能是一个更好的问题。 - captainrad

你需要在哪些浏览器中使用此功能？ - Marko

@Marko，IE7及以上版本，Chrome，Firefox（通常的浏览器；） - captainrad

2个回答

0

我相信你正在寻找类似这样的东西？

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

- moose

我需要填充同时在右侧和底部。这在我的chrome或firefox浏览器中并未显示出来。 - captainrad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Neil · Accepted Answer

第一种方法：

#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>