我有問題對齊我的div與框大小：邊框當我開始使用百分比填充，框的位置將不匹配位置的百分比。使用填充邊框大小的百分比定位問題

下面的代碼，粘貼到任何HTML文件進行查看：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Testing</title> 
    <style type="text/css" media="screen"> 
     body{ 
      width:100%; 
      height:100%; 
      background-color: blue; 
      overflow:none; 
      padding:0; 
      margin:0; 
     } 
     #box{ 
      padding-top:50%; 
      width:100%; 
      height:100%; 
      background-color:blue;  
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box;   
     } 

     #light{ 
      width:100%; 
      background-color:yellow;      
     } 
    </style> 
</head> 
<body> 
    <div id='box'> 
     <div id='light'> 
      halo world 
     </div> 
    </div> 
</body> 
</html>

黃色DIV將定位接近底部，而設置我的填充比例爲50％。這是一個錯誤還是我錯誤地得到了邊框的概念，它將寬度和高度一起追加填充。

在Chrome和Firefox上測試。

編輯

通過@Claude Grecea建議嘗試通過像素的東西，沒有身高簡單，固定的div高度。但是，如果我把填充頂部：50％，那麼這個盒子仍然會被扔到很低的地方。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Testing</title> 
    <style type="text/css" media="screen"> 
     .box{ 
      height:1000px; 
      padding-top:50%; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      background-color:#C1C1C1;   
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     halo world 
    </div> 
</body> 
</html>

來源

2012-09-20 TonyTakeshi

我有一個類似的問題，請參閱http://stackoverflow.com/questions/15693480/odd-behavior-calculating-percentage-padding-with-box-sizingborder-box - 垂直填充作爲％從寬度計算。 –

我相信這是因爲你身體100％的高度會佔用屏幕尺寸。此外，如果你想要居中一個div使用餘量，即使在100％的情況下也能提供所需的外觀。

「盒子模型」，在CSS是這樣的：

寬度+填充+邊框=實際可見/渲染箱高度+填充+邊框的寬度=實際可見/渲染箱的高度

http://css-tricks.com/box-sizing/

來源

2012-09-20 06:53:41

感謝您的回覆。我做了一個測試，顯然不是由此造成的。你可以參考我更新的問題。 – TonyTakeshi

使用填充邊框大小的百分比定位問題

編輯

回答

相關問題