Geek Answers Handbook

<! DOCTYPE html> prevents relative css heights

(Everything is tested in the latest firefox.)

This html code creates a red border that fills almost the screen:

<html>
<head>
</head>
<body>
  <div style="height:100%;background-color:red;"></div>
</body>
</html>

But adding a doctype declaration disables relative heights and makes the div height equal to zero:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="height:100%;background-color:red;"></div>
</body>
</html>

Why is this? In particular, I don’t understand why browsers consider relative heights in the document without doctype, since they are not specified in explicit html tags.

+2
source share
3 answers

doctype . doctype, - , ( ).

, , 100%, . , , doctype , .

+4

: 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, -.

+3

The above answer is why, if you were looking for a fix by setting the absolute position and applying top, right, left and bottom, do the trick:

<!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>
0
source

More articles:


All Articles