保證金頂部：100％獲得父寬度值...奇怪

我在大多數瀏覽器（即ff，chrome，safari）上都有很奇怪的問題。下面是示例代碼：保證金頂部：100％獲得父寬度值...奇怪

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     html{ 
      outline: 1px #0ff solid; 
      background: rgba(0,255,255,0.1); 
     } 
     body{ 
      margin: 0; 
      padding: 0; 
      outline: 1px #00f solid; 
      background: rgba(0,0,255,0.1); 
     } 
     #aDiv{ 
      width: 300px; 
      outline: 1px #f00 solid; 
      background: rgba(255,0,0,0.2); 
     } 
     #bDiv{ 
      margin-top: 100%; 
      outline: 1px #0f0 solid; 
      background: rgba(0,255,0,0.1); 
     } 
    </style> 
</head> 
<body> 
    <div id="aDiv"> 
     <div id="bDiv"> 
      content 
     </div> 
    </div> 
</body> 
</html>

當改變#aDiv寬度，然後#bDiv邊距將與相同的值而改變。我不知道它是如何可能的，高度達到寬度。無論如何，也許你可以向我解釋發生了什麼事？

最好的問候;）

來源

2011-10-05 Artnova Art

這實際上是according to the spec

<百分比>百分比相對於的所生成的框的包含塊的寬度來計算。請注意， 'margin-top'和'margin-bottom'也是如此。如果包含塊的寬度取決於此元素，則生成的佈局在CSS 2.1中未定義爲。

漂亮沒用，對不對？您是否考慮過使用position: absolute和bottom: 0？他們可能更多的是你要找的東西。

來源

2011-10-05 13:04:07

我當時的工作完全不同，但是因爲瀏覽器並不總是按預期工作，所以我測試了完全隨機的屬性，作爲邊緣頂端：100％有點傻。我在（垂直）margin-top/margin-bottom和（horizontal）width之間得到了奇怪的相關性。正如你所說，相當無用;） –

不幸的是，它符合標準，但祝你好運。 –

什麼樣的白癡把這個標準..這是......幾乎令人難以置信的愚蠢，基於水平值的垂直百分比。 – Noishe

#bDiv{ 
     margin-top: 100%; --> This need to change 
     outline: 1px #0f0 solid; 
     background: rgba(0,255,0,0.1); 
    }

它不是一個奇怪的問題。這是因爲您已將margin-top設置爲100％，因爲aDiv是bDiv的父級，因此其寬度爲aDiv爲margin-top。

來源

2011-10-05 13:03:26

我很清楚如何消除這個問題，但是我對原因感到好奇，爲什麼垂直百分比從橫向父寬度獲得價值。這是毫無意義的...... –

這一切都與你的CSS上BDIV有margin-top: 100%;

做如果刪除此，一切行爲恢復正常。

來源

2011-10-05 13:06:52 Luke

我很清楚如何消除這個問題，但是我很好奇原因，爲什麼垂直百分比從橫向父寬度獲得價值。這個不成立... –

感謝隊友，請參考Kasun的回答 – Luke

您可以嘗試視口相對單位（1vw =視口寬度的1％，1vh =視口高度的1％）。

試過margin-top: 90vh;？

來源

2015-01-21 21:47:08 cptstarling

，我必須更多地使用這個值！ – domiSchenk

保證金頂部：100％獲得父寬度值...奇怪

回答

相關問題