I have a general problem with height of the html/body elements.
In the fiddle below:
* { box-sizing: border-box; }
html, body {
min-height: 100%;
background: red;
}
body {
height: 100%;
background: blue;
}
section {
background: green;
height: 50px;
width: 50px;
}<html>
<head>
</head>
<body>
<section>ABCD</section>
</body>
</html>I would expect the body to have the exact same height as his parent html element (which properly takes the entire page) but it does not.
Instead, its height is only the as the height of its children elements take.
What am I missing here?
