html - 修复了导航栏重叠内容(使用边距使页面可滚动,我不希望这样)
问题描述
我有一个快速的问题。所以我在页面顶部添加了一个修复导航栏,高度为 44 像素。这部分很好。问题是,因为它position: fixed
不在网页的流程中。我尝试添加边距并使用填充,但它不起作用。当margin-bottom: 44px;
我向下滚动时,页面底部有一个间隙。
另外...我不希望页面可滚动。换句话说,我不希望查看者能够向下滚动页面,因为我添加了填充/边距。
这是我到目前为止所尝试的:
<div class="wrapper">
<nav>
<div class="container">
<ul>
<li><a href="#" class="active"><i class="fab fa-houzz"></i></a></li>
<li><a href="#">Ban</a></li>
<li><a href="#">Warn</a></li>
<li><a href="#">Gift</a></li>
<li><a href="#">User</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Omar</a></li>
</ul>
</div>
</nav>
<div class="content">
</div>
</div>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
}
.wrapper {
height: 100vh;
}
nav {
position: fixed;
top: 0;
width: 100%;
height: 44px;
overflow: scroll;
background: #323232;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
nav ul {
display: flex;
height: 44px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0;
list-style-type: none;
}
nav a {
display: block;
color: white;
font-size: 15px;
font-weight: lighter;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
ul li:last-child a {
font-weight: normal;
}
nav ul li a.active {
color: #B7B7B7;
}
.content {
height: calc(100% - 44px);
background: red;
margin-top: 44px;
}
解决方案
box-sizing:border-box
会为你工作,所以添加:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
请参阅 box-sizing 文档:https ://www.w3schools.com/css/css3_box-sizing.asp
将填充顶部添加到.wrapper
与导航相同的大小,calc()
然后margin-top
从您的.content
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
height: 100vh;
padding-top: 44px;
}
nav {
position: fixed;
top: 0;
width: 100%;
height: 44px;
overflow: scroll;
background: #323232;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
nav ul {
display: flex;
height: 44px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0;
list-style-type: none;
}
nav a {
display: block;
color: white;
font-size: 15px;
font-weight: lighter;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
ul li:last-child a {
font-weight: normal;
}
nav ul li a.active {
color: #B7B7B7;
}
.content {
height: 100%;
background: red;
}
<div class="wrapper">
<nav>
<div class="container">
<ul>
<li><a href="#" class="active"><i class="fab fa-houzz"></i></a></li>
<li><a href="#">Ban</a></li>
<li><a href="#">Warn</a></li>
<li><a href="#">Gift</a></li>
<li><a href="#">User</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Omar</a></li>
</ul>
</div>
</nav>
<div class="content">
</div>
</div>
推荐阅读
- java - Gradle 多项目存储库配置不适用于 spring-boot 应用程序
- reactjs - 如何动态更改导航栏标题?
- ansible - Ansible 角色意味着另一个角色
- python - 如何从 Pandas 系列中提取不同长度的行值到新列?
- python - 添加具有相同键但值元组的变量列表的两个字典的值
- proof - 如何给出正确的前提条件来证明 frama-c 中的断言语句?
- c# - 获取用户头像并在 discord.net 中对其进行缩放
- android - kotlin 上 Fragment 中的 Android AdMob 自适应横幅?
- visual-studio-code - 格式 onsave 在 Prettier 的 VS Code 中不起作用
- javascript - 如何垂直居中输入字段