Почему моя высота div 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), вся страница будет зеленой, как ожидалось.

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

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

Ответы

Ответ 1

Значение CSS height, процентные значения и DOCTYPE

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

html { height: 100%; }

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

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

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

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

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

Здесь Wikipedia определяет режим quirks:

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

Здесь MDN:

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

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

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

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

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

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

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

TL; DR

Здесь разработчики должны знать в двух словах:

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

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

<!DOCTYPE html>

Ответ 2

Вы имеете в виду вертикально? divs являются элементами уровня блока, и по умолчанию они заполняют родительский шрифт по умолчанию.

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

html, body { height:100%; }

См. здесь рабочий образец:

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

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

Ответ 3

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

html {
    height:100%;
}

Ответ 4

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

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

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

Ответ 5

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

CSS

html, body{
  height: 100%;
}