另一个 div 中的 div（css 定位）答案

【问题标题】：div within another div (css positioning)另一个 div 中的 div（css 定位）
【发布时间】：2012-04-24 04:42:19
【问题描述】：

这应该是一个非常简单的。我需要“橙色”div 始终覆盖 100% 的宽度和 100% 的高度。

在该 div 中，我需要“绿色”div 也填充其父级“橙色”div 的 100% 宽度和高度。

此外，“橙色”div 内必须始终有 10 像素的“填充”。

调整窗口大小时，每个 div 都必须分别“调整大小”，以便没有滚动条。

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

【问题讨论】：

如果您希望绿色 div 完全填充，橙色 div 不能有填充。
如何在两者之间保持恒定的 10px 可能是一个更好的问题。
你需要在哪些浏览器中工作？
@Marko ie7 及以上，chrome，firefox（通常;）

标签： html css position css-position

【解决方案1】：

第一种方式：

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

【讨论】：

是否可以对表格元素做同样的事情而不会使其内容泄漏到包装器 div 之外？
@captainrad 我想我可能需要看一个更新的小提琴才能理解你的意思。

【解决方案2】：

我相信您正在寻找这样的东西？

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

【讨论】：

我需要填充在右侧和底部。我在 chrome 或 firefox 中没有显示。