html - CSS Sidebar 与 Navbar 重叠,无法让 div 堆叠
问题描述
我试图让侧边栏堆叠在导航栏下方,但是我无法让侧边栏停止与导航栏的上部重叠。由于某种原因,页脚很好。我希望侧边栏嵌套在导航栏下方并位于网页的左侧。我使用的配置是标题中链接的引导程序 4。
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.navbar{
overflow: hidden;
background-color: #d0f0c0;
}
#navbar a {
float: right;
display: block;
color: #708090;
text-align: center;
padding: 14px;
text-decoration: none;
}
#lower{
display: block;
margin: auto;
position: relative;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #f0e0c0;
overflow-x: hidden;
padding-top: 15%;
display: block;
margin: auto;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="container-flex">
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div id="navbar">
<div class="navbar-brand" style="cursor: pointer; float: right;">
</div>
</div>
</div>
</header>
</div>
<div class="container-flex" style="height: 85%; padding: 0;">
<%= yield %>
</div>
</body>
<div class="container-flex">
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<div class="navbar fixed-bottom" style="height: 10%;">
</div>
</html>
解决方案
您将 .sidenav 设置为 top: 0; 这意味着它将坚持在 0px 位置的顶部。我删除了它,结果如下:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.navbar{
width:100%!important;
overflow: hidden;
background-color: #d0f0c0;
}
#navbar a {
width:100%!important;
float: right;
display: block;
color: #708090;
text-align: center;
padding: 14px;
text-decoration: none;
}
#lower{
display: block;
margin: auto;
position: relative;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
left: 0;
background-color: #f0e0c0;
overflow-x: hidden;
padding-top: 15%;
display: block;
margin: auto;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="container-flex">
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div id="navbar">
<div class="navbar-brand" style="cursor: pointer; float: right;">
</div>
</div>
</div>
</header>
</div>
<div class="container-flex" style="height: 85%; padding: 0;">
</div>
</body>
<div class="container-flex">
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<div class="navbar fixed-bottom" style="height: 10%;">
</div>
</html>
推荐阅读
- flutter - Flutter StompClient 报错 初始化器中只能访问静态成员
- reactjs - 更改后未重新渲染反应状态
- javascript - Uppy - 可以顺序上传吗?
- python - 将我用 Python 得到的值复制到另一个程序
- java - 设置存储在 firebase 中的 TextView 数值
- python - 如何通过使用 python 的阈值进行插值?
- vue.js - Vue 组件正在将我路由到另一个组件
- azure-databricks - 如何使用 Databricks(Python) 将 CSV 写入 Azure Storage Gen2
- constraint-programming - 优化 MiniZinc 中的多个目标
- python - 使用 matplotlib 覆盖多个颜色图