Question

我页面的HTML：

<body>
  <div id="header">
    <div id="menu">
       this is menu
    </div>
  </div>
</body>

CSS：

#header {
       background-color: #0cf;
       border: 1px solid black;
       height: 20%;
       width: 100%;
}
#menu {
       background-color: #ff0;
       color: black;
       font-size: 1.5em;
       height: 29%;
       width: 70%;
       margin-top: 9%;

}

问题是“#menu”的边距相对于“body”元素我希望它的边距相对于“#header”。

你可能会看到我在这里创建一个流畅的网格，我的“#menu”div的边距应该相对于“#header”，否则它将不起作用（参见屏幕截图）。

以下是截图。第一个分辨率为1024 * 768。

其次是分辨率为1280 * 1024

1024*768

1280*1024

在第二个屏幕截图中，“＃menu”在“#header”底部有点高。

我的问题是如何应用随着“#header”的高度发生变化而变化的保证金？

我已经读过关于“保证金崩溃”的事情，但我不认为这是正在发生的事情，因为我的父div有边框。

Answer 1

我使用position：absolute来解决这个问题。顶部：xxx px; （或底部，左侧，右侧）它可以帮助你。

Answer 2

您在#menu { margin-top: 9%; }中使用的9％意味着文档大小的9％，这是所有浏览器窗口的最大值。

对#header和#menu使用position:relative。然后将top:9%提供给#menu。

Answer 3

CSS 中的百分比高度属性只能应用于其父级的位置不是静态的元素。

只需将position: relative添加到#header，就可以了！

Div＆＃34; margin-top＆＃34;是相对于身体而不是父div

3 个答案: