[分享]css三行布局固定头

最近学习前端的小伙伴们应该都会遇到这个问题，就是如何实现一个固定头的三行布局。在这篇文章中，我们将会介绍如何使用 CSS 来实现这个功能。首先，我们需要先了解一下三行布局的结构。三行布局由顶部导航栏、...

最近学习前端的小伙伴们应该都会遇到这个问题，就是如何实现一个固定头的三行布局。在这篇文章中，我们将会介绍如何使用 CSS 来实现这个功能。

首先，我们需要先了解一下三行布局的结构。三行布局由顶部导航栏、中间内容区和底部版权信息组成。其中，顶部导航栏和底部版权信息都是固定不动的，而中间内容区则是随着页面滚动而滚动的。

<div class="wrapper">
  <header class="header">
    <nav>
      ...
    </nav>
  </header>
  <main class="main">
    ...
  </main>
  <footer class="footer">
    <p>Copyright ? 2021 ...
    </p>
  </footer>
</div> 

接下来，我们可以使用 CSS 来实现固定头的效果。首先，我们需要将顶部导航栏和底部版权信息的位置固定：

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
} 

然后，我们需要将中间内容区的位置调整：

.main {
  margin-top: 50px; <!-- 这里的 50px 应该是顶部导航栏的高度 -->
  margin-bottom: 50px; <!-- 这里的 50px 应该是底部版权信息的高度 -->
} 

最后，我们需要在顶部导航栏和底部版权信息下面添加一个空白的占位符，以防止内容区被部分遮盖：

.header, .footer {
  height: 50px; <!-- 这里的 50px 应该是导航栏/版权信息的高度 -->
}

.wrapper::before,
.wrapper::after {
  content: "";
  display: block;
  height: 50px; <!-- 这里的 50px 应该是导航栏/版权信息的高度 -->
} 

好了，以上就是如何使用 CSS 来实现固定头的三行布局。希望这篇文章能够对你们有所帮助哦！