【问题标题】：Positioning issue with border box sizing using padding by percentage使用百分比填充的边框大小定位问题
【发布时间】：2012-09-12 11:40:06
【问题描述】：

当我开始使用百分比填充时，我无法将我的 div 与 box-sizing:border-box 对齐，框的位置与位置的百分比不匹配。

代码如下，粘贴到任意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 高度。但是，如果我把 padding-top: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>

【问题讨论】：

我遇到了类似的问题，请参阅stackoverflow.com/questions/15693480/… - 垂直填充百分比是根据宽度计算得出的。

标签： css

【解决方案1】：

我相信这是因为你的身体 100% 的高度会占据屏幕尺寸。此外，如果您想使 div 居中，请使用边距，即使在 100% 时也能获得所需的外观；

CSS 中的“盒子模型”是这样工作的：

宽度 + 填充 + 边框 = 框的实际可见/渲染宽度高度 + 填充 + 边框 = 框的实际可见/渲染高度

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

【讨论】：

感谢您的回复。我做了一个测试，显然不是这个原因。你可以参考我更新的问题。