1

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.

Johannes
  • 64,305
  • 18
  • 73
  • 130
Julien Mazars
  • 1,032
  • 11
  • 24
  • You have two different problems ("100% not working" and "different rendering with different doctypes") here. The two duplicates (linked) cover each question separately. – Quentin Oct 02 '17 at 15:30
  • You need to have only one html tag and keep specific height if you know, that should solve your problem – Sarang Damkondwar Oct 02 '17 at 15:34

1 Answers1

-1

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>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • what did I get that downvote for - did you even look at the code and the result? – Johannes Oct 02 '17 at 15:29
  • I am not the one downvoted you... Your solution works for me, thank you! – Julien Mazars Oct 02 '17 at 15:37
  • 1
    To say that "The line has nothing to do with it. " is a stretch. Without in place, quirks mode will cause the body to be 100% of the viewport high, hence setting height: 100% to the html and body elements is unnecessary. See [the quirks mode standard, points 3.6 and 3.7](https://quirks.spec.whatwg.org/#the-html-element-fills-the-viewport-quirk) – Alohci Oct 02 '17 at 17:11
  • so why didn't that work obviously, and why does it work then when adding the 100% height for html and body? – Johannes Oct 02 '17 at 17:15
  • It did work. "If I remove this first line, I have the expected behavior." Removing the line causes quirks mode. – Alohci Oct 02 '17 at 17:34
  • but he didn't want to remove it... – Johannes Oct 02 '17 at 17:42