將邊距添加到IE7中的100％寬度元素？

在IE7中，我想爲它的父級寬度爲100％的元素添加一些邊距。但是元素溢出了它的父項。有點合乎邏輯，但是這個問題的解決方案是什麼？將邊距添加到IE7中的100％寬度元素？

我添加了一個簡單的例子，其中黃色的div溢出它的綠色父。

<!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><title>Test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head> 
<body> 

<div style="width: 500px; height: 200px; background-color: green;"> 
<div style="width: 100%; height: 100%; margin: 10px ; background-color: yellow;"> 
    Test 
</div> 
</div> 

</body> 
</html>

謝謝。

來源

2010-03-02 Herman Cordes

如果你只是刪除width: 100%;聲明，就這麼簡單：

<div style="width: 500px; height: 200px; background-color: green;"> 
<div style="height: 100%; margin: 10px ; background-color: yellow;"> 
    Test 
</div> 
</div>

默認行爲是可拉伸至容器的整個寬度。

來源

2010-03-02 11:09:14

好吧，幾乎在那裏！其實高度100％也會導致綠色分區溢出。如果沒有100％的高度，它的高度會降低到文本行的高度。就我而言，這不是一個解決方案。那麼，什麼是最好的解決方案來獲得相同的高度結果？謝謝！ –

@Monty - 要做到這一點，你需要給內部div的高度：180px;'，因爲你知道外部div的高度，所以這是最安全的路線。 –

似乎無法找到任何其他體面的方式。最佳解決方案，謝謝。 –

將邊距添加到IE7中的100％寬度元素？

回答

相關問題