DOCTYPE 的意外布局
unexpected layout with DOCTYPE
我有一个无法解释的奇怪行为:当我将行 <!DOCTYPE html>
放在代码的开头时,我的页面的滚动条没有像预期的那样围绕标记 "main"。如果删除第一行,就会出现预期的行为。这是为什么?我的错误是什么?
<!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>
注意:如果我将 height:calc(100% - 70px)
替换为 height:calc(100vh - 70px)
,我也会有预期的行为,但我想避免使用 vh
.
<!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>
我有一个无法解释的奇怪行为:当我将行 <!DOCTYPE html>
放在代码的开头时,我的页面的滚动条没有像预期的那样围绕标记 "main"。如果删除第一行,就会出现预期的行为。这是为什么?我的错误是什么?
<!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>
注意:如果我将 height:calc(100% - 70px)
替换为 height:calc(100vh - 70px)
,我也会有预期的行为,但我想避免使用 vh
.
<!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>