I have a site which looks good in quirks mode: 

* the navbar is always shown
* the content has a minimum height
* the content is streched when the page is enlarged: content height = document height - navbar height - footer height

Now, I'd like to change to the strict mode by adding `<!DOCTYPE html>`. I tried a lot of things but I didn't get the same behaviour. The content isn't streched anymore. 

I've put the code in this fiddle: <http://jsfiddle.net/5e1yvLxj/>

In the fiddle the strict mode is activated.

index.html

```
<html lang="en">
  <head>
    <link href="main.css" rel="stylesheet"/>
  </head>
<body>
  <div id="nav">
  </div>
  <div id="messages">
   <div id="chat-box">
   </div>
  </div>
  <div id="footer">
  </div>
</body>

```

main.css

```
html {
  min-height: 100%;
  position: relative; 
}

body {
  background-color: #004269; 
  margin-top: 112px;    /* nav */
  margin-bottom: 190px; /* footer */
}

#nav {
  height: 100px;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #227733;
}

#messages {
  position: relative;
  margin: 0;
  position: relative;
  min-height: 200px;
  padding: 10px;
  background-color: white;
  padding: 15px;  }

#chat-box {
  position: relative;
  min-height: inherit;
  padding-top: 0px;
  height: 100%;
}

#footer {
  padding-top: 20px;
  background-color: #227733;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
}

```