<! DOCTYPE html> предотвращает относительную высоту CSS
(Все проверено в последнем Firefox.)
Этот html-код создает почти красное заполнение экрана:
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
Но добавление объявления типа документа отключает относительную высоту и устанавливает высоту div в ноль:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
Почему это? В частности, я не понимаю, почему браузеры учитывают относительную высоту в документе без doctype, так как они не учитывают явные html.
3 ответа
Тип документа обеспечивает определенный набор стандартов для браузера. Если страница не содержит тип документа, браузеры обычно используют какие-то причуды или переходный режим, который более мягок в отношении ошибок разметки (но это плохая практика и может отображать элементы неправильно).
По сути, строго говоря, вы не можете установить этот элемент на 100%, используя набор стандартов этого браузера. Он попытается предсказать, что вы хотите сделать, если вы не включите тип документа или переходный, и соответственно измените стиль страницы.
Вы можете сделать это следующим образом: http://cdpn.io/aHlCd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
div {min-height: 100%; background: red;}
</style>
</head>
<body>
<div></div>
</body>
</html>
Вы также можете просто установить высоту на div, а не на min-height.
Вышесказанное является ответом на то, почему, если вы искали исправление, установка абсолютного положения и применение верхнего, правого, левого и нижнего значений должно помочь:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position: absolute;height:100%;background-color:red;bottom: 0;top: 0;right: 0;left: 0"></div>
</body>
</html>