Question

我有一个奇怪的行为，我无法解释：我的页面的滚动条不在标签周围＆＃34; main＆＃34;正如预期的那样，我将行<!DOCTYPE html>放在代码的开头。如果我删除第一行，我有预期的行为。这是为什么？这里我的错误是什么？

＆＃13;

<!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>

＆＃13;

注意：如果我将height:calc(100% - 70px)替换为height:calc(100vh - 70px)，我也会遇到预期的行为，但我想避免使用vh。

Answer 1

<!DOCTYPE html>行与它无关。

要仅在main元素上获取滚动条，您需要为其父元素height: 100%和body设置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>

DOCTYPE的意外布局

1 个答案: