我页面的 HTML:
#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%;
}
<div id="header">
<div id="menu">
this is menu
</div>
</div>
问题是“#menu”相对于“body”元素有边距,我希望它的边距相对于“#header”。
您可能会看到我在这里创建了一个流畅的网格,我的“#menu”div 的边距应该相对于“#header”,否则它将不起作用(参见屏幕截图)。
这是截图。 第一个分辨率为 1024*768。
其次是1280*1024分辨率
在第二张截图中,“#menu”距离“#header”的底部有点高。
我的问题是如何应用随着“#header”的高度变化而变化的边距?
我已经读过有关“边距折叠”的内容,但我不认为这是这里发生的事情,因为我的父 div 有边框。
最佳答案
您在 #menu { margin-top: 9%; 中使用的 9%;
表示文档大小的 9%,即所有最大浏览器窗口。
对#header 和#menu 使用position:relative
。然后将 top:9%
给 #menu 。
关于html - div "margin-top"是相对于 body 而不是父 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27090717/