Julien Mazars Julien Mazars - 1 year ago 121
HTML Question

unexpected layout with DOCTYPE

I have a strange behaviour I cannot explain: the scrollbar for my page is not around the tag "main" as expected when I put the line

<!DOCTYPE html>
at the beginning of my code. If I remove this first line, I have the expected behavior. Why is that? What is my mistake here?



<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Off Track</title>
</head>

<body style="margin: 0px; padding:0px;">
<header style="background:green; width:100%; height: 50px;">
</header>
<main style="background:red; width:100%; height:calc(100% - 70px); overflow-y: auto">
bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br>
bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br>
bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br>
bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br>
bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br>
bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br>
bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br>
bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br>
bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br>
</main>
<footer style="background: yellow; width:100%; height:20px;">
</footer>
</body>

</html>





NB : I also have the expected behavior if I replace
height:calc(100% - 70px)
by
height:calc(100vh - 70px)
, but I want to avoid using
vh
.

Answer Source

The <!DOCTYPE html> line has nothing to do with it.

To get scrollbars only on your main element, you need to set height: 100% for its parent elements body and html:

<!DOCTYPE html>

<html lang="en" style="height: 100%;">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <title>Off Track</title>
  </head>

  <body style="margin: 0px; padding:0px; height: 100%;">
    <header style="background:green; width:100%; height: 50px;">
    </header>
    <main style="background:red; width:100%; height:calc(100% - 70px); overflow-y: auto">
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
    </main>
    <footer style="background: yellow; width:100%; height:20px;">
    </footer>
  </body>

</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download