margin-top未按預期計算

我嘗試將div居中放在我的頁面上。它應該只使用相對值，因此其大小僅取決於窗口大小。
我找到了一個解決方案，它使盒子居中，但似乎邊距計算不正確。相反，body的大小變得更大，然後窗口。在下面的例子中，螢火蟲告訴我，在我的屏幕上，框#container的大小爲1265x335。在檢查#content時，其尺寸爲506x134和兩側邊界爲2px，符合我的計算。但上邊距爲316.margin-top未按預期計算

我有什麼問題嗎？
保證金應該是335的25％，對吧？
我該如何解決這個問題？

這裏的HTML：

<body> 
    <div id="container"> 
    <div id="content"> 
     nothing... 
    </div> 
    </div> 
</body>

而且這裏的CSS：

html { 
    height:   100%; 
} 

body { 
    height:   100%; 
    margin:   0em 0em 0em 0em; 
} 

#container { 
    height:   100%; 
} 

#content { 
    text-align:  center; 
    width:    40%; 
    height:   40%; 
    margin-top:  25%; 
    margin-left:  auto; 
    margin-right:  auto; 
    margin-bottom:  auto; 
    border:   2px solid black; 
}

來源

2011-09-07 Scolytus

從http://www.w3.org/TR/CSS2/box.html：

的比例相對於計算所產生的寬度盒子的包含塊。請注意，'margin-top'和'margin-bottom'也是如此。

所以你得到1265的25％，這解釋了你所看到的行爲。不幸的是，我沒有任何解決方案。

編輯：CSS3使此聲明取決於包含的塊是否爲horizontal（您希望它是垂直的）。我不認爲任何瀏覽器都會實現所需的block-progression屬性（但它可能會有意想不到的副作用）。

來源

2011-09-07 17:45:00

你認真地說只是說「margin-top：100％」是相對於WIDTH而不是HEIGHT？WTFF。 – Triynko

@Triynko：是的，這是違反直覺的，但這就是標準所說的。 –

margin-top未按預期計算

回答

相關問題