<Form> разбивает высоту: 100%? - PullRequest
Новая
       3

<Form> разбивает высоту: 100%?

5 голосов
/ 14 февраля 2012

Простейшая из страниц, демонстрирующая мою проблему: 

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body
            {
                height: 100%;
                overflow: hidden;
            }
            body
            {
                margin: 0;
                padding: 0;
            }
            #container
            {
                background: red;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

div-container правильно заполняет окно браузера красным.Теперь оберните div в виде: 

<body>
    <form>
        <div id="container"></div>
    </form>
</body>

, и div-контейнер рухнет.Зачем?Что такого в теге формы, который «разбивает» «ближайшего предка с высотой»?

Ответы [ 4 ]

11 голосов
/ 14 февраля 2012

form является элементом block, блочные элементы не имеют никакой высоты, если их содержимое не расширяется или им явно не задана высота. Ближайший предок #container равен form, а его высота равна 0, поэтому высота #container s равна 0.

7 голосов
/ 14 февраля 2012
Высота

100% зависит от всех предков, имеющих явно объявленную высоту.Добавьте высоту к FORM, и ваш пример должен сработать. 

HTML, BODY, FORM {
    height: 100%;
}

То же самое верно для любого процентного значения.Если у родительского элемента не указана высота, его размер будет определяться в зависимости от содержимого.Таким образом, процентный рост ребенка будет основан на том росте, который был рассчитан для его родителя.

2 голосов
/ 05 февраля 2013

Just 

form {
   overflow: hidden;
}
2 голосов
/ 14 февраля 2012

try, 

<style type="text/css">
        html, body, form
        {
            height: 100%;
            overflow: hidden;
        }

или 

<div id="container">&nbsp;</div>

для определения поведения html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...