格「邊距」是相對於身體而不是父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

回答

相關問題

格「邊距」是相對於身體而不是父DIV