Как мне написать CSS для нескольких div, которые заполняют окно браузера? - PullRequest
2 голосов
/ 05 июля 2010

То, что я хочу, это иметь несколько div-ов друг за другом, каждый из которых будет иметь полную ширину и высоту браузера / области просмотра. При изменении размера браузера divs должен соответственно измениться.

Мне удалось сделать это в FF и IE (только ширина: авто и 100% высота для каждого деления), но Safari & Chrome до сих пор не получает этого. Странная вещь, я не понимаю, что происходит в этих браузерах. В то время как первый div ведет себя так, как я хочу, высота становится больше и больше для каждого div, и абсолютные позиционированные элементы, в которых каждый div заканчивается где-то внизу страницы; это беспорядок.

пример того, что я пытаюсь сделать, можно найти здесь: http://konstfuck.se/test/

Ответы [ 3 ]

4 голосов
/ 05 июля 2010

1) У вас нет действительного Doctype, поэтому ваша страница будет отображаться в режиме Quirks и, как писал Анри Сивонен ,

[i] nВ режиме Quirks браузеры нарушают современные спецификации веб-формата, чтобы избежать «взлома» страниц, созданных в соответствии с практиками, которые были распространены в конце 1990-х годов.Различные браузеры реализуют разные причуды.В Internet Explorer 6, 7 и 8 режим Quirks фактически заморожен в IE 5.5.В других браузерах режим Quirks представляет собой несколько отклонений от режима почти стандартов.

2) Добавьте height: 100% к html и body.Как сказано в спецификации , :

Процент рассчитывается относительно высоты сгенерированного блока , содержащего блок .Если высота содержащего блока не указана явно (т. Е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как 'auto'.

Итак, если выне указывайте height содержащего блока, как в вашем примере, height установлен на auto.

0 голосов
/ 05 июля 2010

HTML

<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>

CSS

html, body {
    height: 100%;
}

div {
    height: 100%;
}

Проверьте это здесь .

Примечание: протестировано только в FF и Chrome.

0 голосов
/ 05 июля 2010

Странное поведение ... Я подозреваю, что проблема в том, что элемент BODY увеличивается по мере того, как делятся размеры элементов, поэтому каждому из них присваивается 100% высоты, а высота следующего большого увеличивается.

Попробуйте обернуть их все в div, задайте ему высоту 100% и посмотрите, исправит ли это проблему.

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