Html 另一个div中的div（css定位）_Html_Css_Position_Css Position

Html 另一个div中的div（css定位）

html css

Html 另一个div中的div（css定位）,html,css,position,css-position,Html,Css,Position,Css Position,这应该是一个非常简单的问题。我需要“橙色”div始终覆盖100%宽度和100%高度在这个div中，我需要“绿色”div来填充它的父级“橙色”div的100%宽度和高度此外，在“橙色”分区内，需要始终有10px的“填充” 调整窗口大小时，每个div必须分别“调整大小”，以便没有滚动条。我相信你在找这样的东西 #hold { position:fixed; background:orange; width:100%; height:100%; padding:10px; } #held { p

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

在这个div中，我需要“绿色”div来填充它的父级“橙色”div的100%宽度和高度

此外，在“橙色”分区内，需要始终有10px的“填充”

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

我相信你在找这样的东西

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

第一种方式：

#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完全填充，橙色div就不能有填充。我如何在两者之间保持10px不变可能是一个更好的问题。你需要在哪些浏览器中使用它？@Marko ie7及以上、chrome、firefox（通常；）我需要填充在右侧和底部。这在chrome或firefox中没有出现。你能对table元素做同样的事情，而不让它的内容泄漏到包装器div之外吗？@captainrad我想我可能需要看到一个更新的fiddle来理解你的意思。