HTML-Doctype kills css declaration "height: 100%;"

Question

I've been working on a layout for a web page and even though I got it running in a minimalistic example it refuses to work when transferred to my sites template.

First I thought that some CSS rules or else would interfere, but I narrowed it down to the doctype:

If I run the following example in chrome, everything works fine. But as soon as I add a doctype (no matter if html, xhtml, strict, transitional or loose), its messed up. and my "messed up" i mean the the css directive "height: 100%;" is completely ignored for the div with the id "container".

Can someone give me a hint where the problem is?

<html>
<head>

<style>
body
{
    margin:0px;
    padding: 0px;
}

#container
{
    display: table;
    position: relative;
    border: 1px dashed black;
    height: 100%;
    width: 100%;
}

#header
{
    position:absolute;
    top: 0px;
    left: 0px;
    width: 90%;
    height: 100px;
    border: 1px solid red;
}

#main
{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    border: 1px solid green;
}

#inner
{
    position:relative;
    margin-top: 100px;
    width: 90%;
    height: 300px;
    border: 1px solid blue;
}
</style>

</head>
<body>

<div id="container">
    <div id="header">header</div>
    <div id="main">
        <div id="inner">
            inner
        </div>
    </div>
</div>

</body>
</html>

Here's a simple and clear explanation of the DOCTYPE issue: http://stackoverflow.com/a/32215263/3597276 — Michael Benjamin, Aug 25 '15 at 23:11

score 0 · Answer 1 · answered Jul 30 '13 at 16:26

0

I'd be setting the following in CSS:

html {
    height: 100%;
}

As height inherits from its parent element.

answered Jul 30 '13 at 16:26

cheersjosh

1,139
8
15

2

It needs to be height, body and any other ancestor elements. – Sinister Beard Oct 19 '15 at 14:35

HTML-Doctype kills css declaration "height: 100%;"

1 Answers1

Linked