意想不到的布局与DOCTYPE
这个问题在这里已经有了答案：
<!DOCTYPE html>行与它无关。
要只在你的main元素上获得滚动条，你需要为其父元素body和html设置height: 100% ：
<!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>