Проблема с позиционированием с использованием размера рамки с использованием дополнения в процентах

У меня проблема с выравниванием div с размером поля: 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%. Является ли это ошибкой, или я неправильно понял концепцию пограничного блока, который добавляет дополнение вместе с шириной и высотой.

Протестировано на хром и 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>
+2
источник поделиться
1 ответ

Я считаю, это потому, что вы на 100% высотой в своем теле, которая займет размер экрана. Кроме того, если вы хотите центрировать поле использования div, которое дает желаемый внешний вид даже на 100%;

"Кодовая модель" в CSS работает следующим образом:

width + padding + border = фактическая видимая/визуализированная ширина высоты окна + padding + border = фактическая видимая/отображаемая высота окна

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

+1
источник

Посмотрите другие вопросы по метке или Задайте вопрос