格 “边距” 是相对于身体而不是父DIV

为我的网页的HTML：格 “边距” 是相对于身体而不是父DIV

<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有边框。

来源

2014-11-23 ali ahmad

_“问题在于”#menu“有相对于”body“元素的边距”_ - 您是否在谈论百分比值导致的边距_amount_？ _“我已经读过关于”边缘折叠“的东西，但我不认为这是发生在这里的事情，因为我的父div有一个边框” - - 因为它有一个边框，内部元素的边缘顶部是“保持在里面”，否则它将与外部元素的边缘相结合，以便后者具有边缘顶部。 – CBroe 2014-11-23 15:40:06

让我重申一下：当您的标题为70％时，您希望您的保证金为30％。而当您的标题为60％时，您希望保证金为40％？我对么？ – 2014-11-23 15:40:41

是的，如果#head的高度转换为700px，那么特定分辨率和#menu的边距为20px。我希望“#menu”的边距为18px，对于600px的“#head”高度为 – 2014-11-23 15:48:31

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

来源

2014-11-23 15:44:07

是的，我认为它会工作也许有更好的解决方案。我通常避免使用绝对定位，因为它带走了整个灵活性，并可能使事情看起来很丑。 – 2014-11-23 15:52:29

基本上，你是对的。这就是为什么，我这样做，例如： 'position：absolute; 身高：20％; 宽度：100％; top：0px; left：0px;' 也试过其他方式，但这是可靠的工作。除此之外，大部分用户对如何去做并不感兴趣，只关心结果。这就是为什么，我们必须努力让自己的生活更轻松。 – 2014-11-23 15:58:16

您在#menu { margin-top: 9%; }中使用的9％是所有最大浏览器窗口的9％的浏览器大小。

对#header和#menu都使用position:relative。然后将top:9%设为#menu。

来源

2014-11-23 20:38:46 tsepehr

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

只需将position: relative添加到#header，您应该好好去！

来源

2014-11-23 21:59:29

格 “边距” 是相对于身体而不是父DIV

回答

相关问题