Positioning issue with border box sizing using padding by percentage

2018-06-27 04:39:34

I have problem aligning my div with box-sizing:border-box when I start to use padding by percentage, the position of the box will not match the percentage of the positions.

Here's the code, paste it to any html file to view it:

<!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>

The yellow div will positioned near to bottom, while I set my padding percentage to 50%. Is this a bug or I got the concept of border-box wrongly, which append the padding together with the width and height.

Tested on both chrome and firefox.

Edit

Suggested by @Claude Grecea Tried with something simpler with no body height and fixed div height by pixel. But, the box still thrown to far below, if I put 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>

I believe it is because you are 100% height in your body which will take up the the screen size. Additionally, if you want to center a div use margin which gives you the desired look even at 100%;

The "box model" in CSS works like this:

width + padding + border = actual visible/rendered width of box height + padding + border = actual visible/rendered height of box

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

链接地址: http://www.djcxy.com/p/76028.html

上一篇: 可能的CSS错误？

下一篇: 使用填充百分比来定位边框大小的问题