Переполнение Div с заполнением в Chrome - PullRequest
Новая
       11

Переполнение Div с заполнением в Chrome

2 голосов
/ 19 января 2011

Может кто-нибудь объяснить, почему я получаю вертикальное переполнение этим кодом, пожалуйста? 

<html>
    <body style="width:120px; height:120px; background-color:white;">
        <div style="padding:20px; background-color:blue;">
            <div style="width:100%; height:100%; background-color:white">
                <div style="padding:20px; background-color:green;">
                    <div style="width:100%; height:100%; background-color:white">
                    </div>
                </div>
            </div>
       </div>
    </body>
</html>

В Chrome 8 это выглядит так:

alt text

Ответы [ 2 ]

3 голосов
/ 19 января 2011

Я предполагаю, что вы хотите, чтобы он выглядел так, как он выглядит, но с зеленой рамкой, не выступающей за синей, и все это умещается внутри 120px * 120px.

Вы не указываете тип документа в этом коде, поэтому становится трудно заставить вещи работать между различными браузерами - некоторые браузеры переходят в «режим причуд».

С кодом, который вы дали, IE8, например, растягивает макет до ширины окна.

Первый шаг к тому, чтобы он выглядел согласованно, - это добавление типа документа, такого как тип документа HTML5:

<!DOCTYPE html>

Добавление, которое делает его похожим между Chrome, IE8, Firefox, Opera:

.. но это также заставляет его выглядеть неправильно, и не существует простого способа исправить это, потому что вы пытаетесь смешать измерения на основе % и px (простое решение - использовать просто % или просто px). Использование height: 100% и padding: 20px сделает элемент слишком высоким, потому что его общая высота будет заполнением плюс высота родительского элемента (это и является причиной вашего «переполнения»).

Итак, вот новый код, который дает визуальный эффект, который вы ищете, используя другой метод:

Демонстрация в реальном времени 

<!DOCTYPE html>
<html>
<body style="width:120px; height:120px">
    <div style="background:blue; width:100%; height:100%; position:relative">
        <div style="background:green; position:absolute; top:20px; right:20px; bottom:20px; left:20px">
            <div style="background:white; position:absolute; top:20px; right:20px; bottom:20px; left:20px"></div>
        </div>
    </div>
</body>
</html>
2 голосов
/ 05 декабря 2011

Ответ, который вы ищете, можно найти на этой странице:

Iframe 100% высота внутри корпуса с прокладкой

Короче говоря, HTML5 приходит на помощь. Добавьте этот CSS к вашему DIV, и проблема будет решена: 

box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
...