固定导航栏且不让滚动条出现在导航栏上

最新推荐文章于 2022-11-09 12:23:48 发布

little_little0_0

最新推荐文章于 2022-11-09 12:23:48 发布

阅读量4.4k

点赞数 3

分类专栏：前端进阶文章标签：页面布局

本文链接：https://blog.csdn.net/little_little0_0/article/details/83866507

版权

前端进阶专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这是做项目时会遇到的经典布局问题，首先交代下背景，然后给出一个具体的解决方案。
背景：一个高度固定的导航栏始终固定在视口的顶部，下面是一个高度固定的盒子，再下面是主要内容，它的高度会变化，但它有一个最小高度，且多数情况下都处于这个最小高度，页面还有一个底部。我们希望：滚动条不要出现在导航栏，且多数情况下页面不会出现滚动条，及所有内容都出现在视口上。下面是个简单的示意图。

我们先给出html的代码结构：

<html>
<head><title>项目记录</title></head>
<body>
<header class="header"></header>
<div class="container">
  <div class="sureH"></div>
  <div class="mainCon"></div>
  <footer class="footer"></footer>
</div>
</body>
<ml>

根元素

* {
  margin: 0;
  padding: 0;
}
html,body {
  height: 100%;
  overflow-y: hidden;
}

这样做的目的是让html占满整个视口，与此同时，y方向超出的话就隐藏

固定导航栏

.header {
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
}

我们需要注意的是,fixed定位的元素要指定宽高，top和left的值默认为0，但最好还是指定一下。如果我们想要这个导航栏随浏览器窗口缩放进行适配，那就要根据导航栏内部的内容进行规定，当宽度小于多少时，把某些内容隐藏或者折叠起来。因为进行fixed定位的元素宽度若超出视口宽度，超出部分就会被隐藏，不会随页面的宽度滚动条出现

最外层的容器

.container {
  height: calc(100% - 80px);
  margin-top: 80px;
  overflow-y: auto;
}

这个容器高度的百分比是针对于父级的，也就是我们的body，我们让它margin-top: 80px避开了导航栏，然后让它的高度占满剩下的全部。如果内容超出这个高度就会自动产生滚动条。这样滚动条就不会出现在导航栏上了。

固定高度的内容

.sureH {
  height: 100px;
}

底部

.footer {
    height: 100px;
}

主要内容

.mainCon {
    min-height: calc(100% - 200px);
}

我们为了让底部大多数情况下都恰好固定在视口底部，给它设置一个min-height，是用它父级的高度（100%）减去上面固定的高度和底部的高度。

OK,Over!
通常情况下，浏览器自带的滚动条都特别丑，想要好看的滚动条请移步关于滚条的选择器。

little_little0_0

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
固定导航栏且不让滚动条出现在导航栏上

这是做项目时会遇到的经典布局问题，首先交代下背景，然后给出一个具体的解决方案。背景：一个高度固定的导航栏始终固定在视口的顶部，下面是一个高度固定的盒子，再下面是主要内容，它的高度会变化，但它有一个最小高度，且多数情况下都处于这个最小高度，页面还有一个底部。我们希望：滚动条不要出现在导航栏，且多数情况下页面不会出现滚动条，及所有内容都出现在视口上。下面是个简单的示意图。我们先给出html的代码...
复制链接

扫一扫