为什么关闭 1 像素边框会在固定位置 header 和 flex 增长时产生 75px 溢出？

Question

对此感到困惑......我有以下布局：

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      height: 100vh;
      border: 1px solid red;
    }
    header {
      position: fixed;
      max-width: 800px;
      height: 75px;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      background-color: beige;
    }
    main {
      display: flex;
      flex-direction: column;
      max-width: 800px;
      margin: 75px auto 0 auto;
      border: 1px solid green;
      height: calc(100% - 75px);
    }
    main section {
      background-color: rgb(206, 152, 114);
      flex: 1;
    }
    footer {
      background-color: rgb(245, 186, 36);
    }
  </style>

  <body>
    <header>header. position:fixed height:75x</header>
    <main>
      <section>flex grow section</section>
      <footer>footer</footer>
    </main>
  </body>
</html>

body 周围的边框显示它占据了整个视口高度。如果我在开发人员工具中关闭边框，则会出现一个垂直滚动条，并且我在首屏下方看到 header 的固定高度。尽管固定 header 下面的方块有 75px 的 margin-top 并且已经从它的高度中扣除了它。

为什么注释掉 body 周围的 1 像素边框会导致此行为？

https://jsfiddle.net/karasutengu/r8awmpfz/4/

Answer 1

这是由于固定位置。

我建议使用 sticky header 而不是 fixed header。因为你的 html 结构允许它。

在 sticky 定位的情况下，您不必为部分从顶部设置额外的边距，因为粘性元素充当相对.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    border: 1px solid red;
}

header {
    position: sticky;
    max-width: 800px;
    height: 75px;
    top: 0;
    /*left: 0;
    right: 0;*/
    margin: 0 auto;
    background-color: beige;
}

main {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    /*margin: 75px auto 0 auto;*/
    margin: 0 auto 0 auto;
    border: 1px solid green;
    height: calc(100% - 75px);
}

main section {
    background-color: rgb(206, 152, 114);
    flex: 1;
}

footer {
    background-color: rgb(245, 186, 36);
}

<body>
    <header>header. position:fixed height:75x</header>
    <main>
        <section>flex grow section</section>
        <footer>footer</footer>
    </main>
</body>

为什么关闭 1 像素边框会在固定位置 header 和 flex 增长时产生 75px 溢出？

Why does toggling off a 1 pixel border create a 75px overflow with a fixed position header and flex grow?

html

css

height

border

flexbox