Почему высота 100% работает, когда DOCTYPE удален?

Это весь код:

<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
    <div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>

Ничего не появляется. Но если я удалю первую строку (doctype), вся страница станет зеленой, как и ожидалось.

У меня есть два вопроса:

  1. Как заставить div заполнить страницу, не удаляя этот тег?
  2. Почему удаление doctype помогает?

html css doctype quirks-mode
person MohammadHossein R    schedule 25.08.2015    source источник

Ответы (5)


arrow_upward
54
arrow_downward

Свойство CSS height, процентные значения и DOCTYPE

На первую часть вашего вопроса о том, как применить 100%-ную высоту к вашему div, другие отвечали несколько раз. По сути, объявите высоту корневого элемента:

html { height: 100%; }

Полное объяснение можно найти здесь:

Вторая часть вашего вопроса привлекла гораздо меньше внимания. Я постараюсь ответить на это.

Почему после удаления doctype [зеленый фон] работает?

Когда вы удаляете DOCTYPE (объявление типа документа), браузер переключается из стандартного режима в причудливый режим.

В режиме совместимости, также известном как режим совместимости, браузер имитирует старый браузер, чтобы он мог анализировать старые веб-страницы, созданные до появления веб-стандартов. Браузер в специальном режиме притворяется IE4, IE5 и Navigator 4, чтобы он мог отображать старый код так, как задумал автор.

Вот как Википедия определяет режим совместимости:

В компьютерных технологиях особый режим относится к методу, используемому некоторыми веб-браузерами для обеспечения обратной совместимости с веб-страницами, разработанными для старых браузеров, вместо строгого соблюдения стандартов W3C и IETF в стандартном режиме.

Вот мнение MDN:

В старые времена Интернета страницы обычно писались в двух версиях: одна для Netscape Navigator и одна для Microsoft Internet Explorer. Когда веб-стандарты были созданы в W3C, браузеры не могли просто начать их использовать, поскольку это нарушило бы работу большинства существующих веб-сайтов. Поэтому браузеры представили два режима, чтобы обрабатывать новые сайты, соответствующие стандартам, иначе, чем старые устаревшие сайты.

Теперь, вот конкретная причина, по которой height: 100% в вашем коде работает в необычном режиме, но не в стандартном режиме:

В режиме стандартов, если родительский элемент имеет height: auto (высота не определена), то процентная высота дочерних элементов также будет рассматриваться как height: auto (в соответствии с спец.).

Вот почему ответ на ваш первый вопрос html { height: 100%; }.

Чтобы height: 100% работало в вашем div, вы должны установить height для родительских элементов (подробнее).

Однако в специальном режиме, если родительский элемент имеет height: auto, то процент высоты дочерних элементов измеряется относительно области просмотра.

Вот три ссылки, описывающие это поведение:

TL;DR

Вот что нужно знать разработчикам в двух словах:

Браузер в необычном режиме будет отображать веб-страницы непредсказуемым, ненадежным и часто нежелательным образом. Поэтому всегда указывайте DOCTYPE, чтобы документ отображался в стандартном режиме< /а>.

Раньше выбор правильного DOCTYPE был двусмысленным и несколько запутанным процессом с множеством версий DOCTYPE на выбор. Но сегодня этот процесс прост как никогда. Просто используйте:

<!DOCTYPE html>
person Michael Benjamin    schedule 25.08.2015
comment
Я отметил этот старый вопрос, на который я ответил, как дубликат этого. Еще один из вашего списка желаний ;) - person BoltClock; 19.02.2016

arrow_upward
9
arrow_downward

Вы имеете в виду вертикально? div — это элементы блочного уровня, и поэтому они по умолчанию заполняют родителя по горизонтали.

Для того, чтобы это работало, вам также нужно задать HTML-тегу высоту 100%.

html, body { height:100%; }

См. здесь для рабочего образца:

http://jsfiddle.net/uhg0y9tm/1/

Как утверждают некоторые другие здесь, как только вы удалите первую строку (тип документа HTML5), браузеры будут отображать страницу по-другому, и в этом случае нет необходимости указывать HTML-тегу явную высоту 100%.

person HaukurHaf    schedule 25.08.2015

arrow_upward
5
arrow_downward

С типом документа HTML5 вам также необходимо установить высоту элемента html:

html {
    height:100%;
}
person j08691    schedule 25.08.2015

arrow_upward
5
arrow_downward

Вам также нужно будет установить ширину и высоту тегов <html> и <body> на 100%, потому что, когда вы назначаете ширину и высоту тега <div> на 100%, это означает, что вы назначаете ему полную ширину и высоту его родительского элемента. , в этом случае родительским элементом <div> является <body>, а родительским элементом <body> является <html>.

Почему это работает, когда я удаляю тег <!DOCTYPE html>?

Потому что, когда вы удаляете тег <!DOCTYPE html>, браузер отображает страницу по-другому, показывая другие результаты.

person Arjun    schedule 25.08.2015
comment
Наконец, объяснение, которое имеет смысл. Если элементы html и body не расширяются, чтобы покрыть страницу, то и содержащиеся в них элементы тоже не расширятся. Это хороший ответ. - person MarcD; 14.05.2018

arrow_upward
2
arrow_downward

Вам нужно будет сделать высоту тегов html и body равной 100%, чтобы заполнить страницу.

CSS:

html, body{
  height: 100%;
}
person dinomix    schedule 25.08.2015