unexpected layout with DOCTYPE

2018-07-02 01:38:25

This question already has an answer here:

What are the different doctypes in html and what do they mean? 6 answers

Make body have 100% of the browser height 19 answers

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>

链接地址: http://www.djcxy.com/p/89398.html

上一篇: 如何将容器DIV的高度设置为窗口高度的100％？

下一篇: 意想不到的布局与DOCTYPE