html - 修复了在内容浏览器页脚上滚动时的页眉和页脚设计

Question

你好，

当我滚动浏览器时，它是我的固定页眉和页脚。浏览器页眉在我的页脚跳跃时被隐藏了我该如何修复它.. 我在下面附上了跳跃的屏幕截图：

..

#header {
  width: 100%;
  background: #fff transition: top .5s ease;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  height: 50px z-index: 999;
}

#main {
  padding-top: 50px;
  transition: padding-top .2s ease;
}

.fullContainer {
  min-height: calc(100vh - 50px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#footer {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
}

<div id="root">
  <header id="header"></header>
  <footer id="footer"></footer>
  <main id="main">
    <div class="fullContainer">
    </div>
  </main>
</div>

谢谢

标签： htmlcssresponsive-design

Answer 1

这将起作用：

body {
  margin: 0;
}
#root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#root > * {
  width: 100%;
}
#header, #footer {
  flex: 0 0 auto;
}
#main {
  flex: 1 1 100%;
  overflow-y: auto;
}

<div id="root">
  <header id="header">fixed header</header>
  <main id="main">
    <div class="fullContainer">
      your content here
      ...
      <hr>
      let's test with something tall
      ....
      <div style="height: 400vh"></div>
    </div>
  </main>
  <footer id="footer">fixed footer</footer>
</div>

它也适用于短内容：

body {
  margin: 0;
}
#root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#header, #footer {
  flex: 0 0 auto;
}
#main {
  flex: 1 1 100%;
  overflow-y: auto;
}

<div id="root">
  <header id="header">fixed header</header>
  <main id="main">
    <div class="fullContainer">
      your content here
      ...
      <hr>
      let's test with something small
      ....
    </div>
  </main>
  <footer id="footer">fixed footer</footer>
</div>

跨浏览器，跨设备，不依赖定位，保证不跳转。

---

在某些设计中，它可能存在的唯一问题是#header,#main和#footer实际上并不重叠，如果您希望页眉（和/或页脚）显示在#main.

要解决这种罕见的边缘情况，您至少有几个解决方案：

• a)不要将背景放在#main、#root甚至body。问题解决了。
• b）如果出于某种设计原因（假设页眉和页脚是半透明的，并且它们使它们下面的东西变得模糊 - 这是一个很酷的效果）你实际上希望内容#main在它们下面滚动，所以当你滚动时它会变得模糊，您将不得不使用 JavaScript。
  您希望给出#main一个等于 ' 高度的顶部负边距（和一个匹配的正顶部填充）和一个等于#header' 高度的底部负边距（与一个正底部填充匹配）#footer。并且，很明显，同时给出#header一个#footer比 's 更高的z-index值#main。
  当页眉/页脚更改高度时，JS 将用于更新边距/填充。

我开始写如何解决这个问题（同样有几个选项），但在某些时候我意识到答案太长了，这一切都是因为试图解决一个极端情况。如果您有这种特殊的边缘情况，请将其作为另一个问题提出，我会在那里回答。