根据 CSS 中的顶部导航栏调整侧边栏位置
Adjusting sidebar position according to top navbar in CSS
我可以制作侧边栏和响应式顶部导航栏，但在较小的视口（手机、平板电脑）上，侧边栏不会根据顶部导航栏的位置调整其位置。
我使用固定值使其固定在左侧，但这也导致它无法在较小的屏幕上调整高度，顶部导航栏和侧边栏内容区域之间出现间隙
如何在调整大小时使此侧边栏响应顶部导航栏？
这是我的代码：
https://www.codeply.com/go/XHDeSP3Fzv
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dorami - Nền tảng quản lý bán hàng và kho vận</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
nav div ul li a.nav-link {
color: white;
padding: 1rem;
}
nav div ul li a.nav-link:hover {
background-color: #004d40;
}
body {
padding-top: 50px;
padding-left: 80px;
}
.navbar {
background-color: #00695c;
}
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 60px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 50px; /* Stay at the top */
left: 0;
background-color: #4e342e; /* Black */
overflow-x: auto; /* Disable horizontal scroll */
}
.sidenav a {
text-decoration: none;
font-size: 16px;
color: white;
display: block;
padding: 20px 0;
}
.sidenav a:hover {
background-color: #3e2723;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm py-0">
<a class="navbar-brand" href="/dashboard/">
<img src="/images/logo.webp" width="40" height="40" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-2">
<a class="nav-link" href="#">Shop Manager</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Customer Care</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Messenger Order</a>
</li>
</ul>
</div>
</nav>
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
调整屏幕大小时我没有看到间隙。但是，我看到移动菜单按钮下降并阻止了侧边栏上的第一个 link。您可以只进行媒体查询并调整 top: 50px 值以考虑主导航栏增加的高度。
这是更新后的代码，您需要稍微修改一下 CSS。
我们从不在 HTML/BODY 标签中使用 Padding 或 margin。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dorami - Nền tảng quản lý bán hàng và kho vận</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
html,body {
padding: 0;
margin: 0;
}
nav div ul li a.nav-link {
color: white;
padding: 0;
line-height: 50px;
}
nav div ul li a.nav-link:hover {
background-color: #004d40;
}
.fixed-top{
height: 50px;
}
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 60px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 50px; /* Stay at the top */
left: 0;
background-color: #4e342e; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
}
.sidenav a {
text-decoration: none;
font-size: 16px;
color: white;
display: block;
padding: 20px 0;
}
.sidenav a:hover {
background-color: #3e2723;
}
</style>
</head>
<body>
<div>
<nav class="navbar fixed-top navbar-expand-lg py-0" style="background-color: #00695c;">
<a class="navbar-brand" href="/dashboard/">
<img src="/images/logo.webp" width="40" height="40" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-2">
<a class="nav-link" href="#">Shop Manager</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Customer Care</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Messenger Order</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div class="content">
<h1>Hello</h1>
</div>
</body>
</html>
如有进一步疑问，请随时发表评论
我可以制作侧边栏和响应式顶部导航栏，但在较小的视口（手机、平板电脑）上，侧边栏不会根据顶部导航栏的位置调整其位置。
我使用固定值使其固定在左侧，但这也导致它无法在较小的屏幕上调整高度，顶部导航栏和侧边栏内容区域之间出现间隙
如何在调整大小时使此侧边栏响应顶部导航栏？
这是我的代码：
https://www.codeply.com/go/XHDeSP3Fzv
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dorami - Nền tảng quản lý bán hàng và kho vận</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
nav div ul li a.nav-link {
color: white;
padding: 1rem;
}
nav div ul li a.nav-link:hover {
background-color: #004d40;
}
body {
padding-top: 50px;
padding-left: 80px;
}
.navbar {
background-color: #00695c;
}
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 60px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 50px; /* Stay at the top */
left: 0;
background-color: #4e342e; /* Black */
overflow-x: auto; /* Disable horizontal scroll */
}
.sidenav a {
text-decoration: none;
font-size: 16px;
color: white;
display: block;
padding: 20px 0;
}
.sidenav a:hover {
background-color: #3e2723;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm py-0">
<a class="navbar-brand" href="/dashboard/">
<img src="/images/logo.webp" width="40" height="40" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-2">
<a class="nav-link" href="#">Shop Manager</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Customer Care</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Messenger Order</a>
</li>
</ul>
</div>
</nav>
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
调整屏幕大小时我没有看到间隙。但是，我看到移动菜单按钮下降并阻止了侧边栏上的第一个 link。您可以只进行媒体查询并调整 top: 50px 值以考虑主导航栏增加的高度。
这是更新后的代码，您需要稍微修改一下 CSS。 我们从不在 HTML/BODY 标签中使用 Padding 或 margin。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dorami - Nền tảng quản lý bán hàng và kho vận</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
html,body {
padding: 0;
margin: 0;
}
nav div ul li a.nav-link {
color: white;
padding: 0;
line-height: 50px;
}
nav div ul li a.nav-link:hover {
background-color: #004d40;
}
.fixed-top{
height: 50px;
}
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 60px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 50px; /* Stay at the top */
left: 0;
background-color: #4e342e; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
}
.sidenav a {
text-decoration: none;
font-size: 16px;
color: white;
display: block;
padding: 20px 0;
}
.sidenav a:hover {
background-color: #3e2723;
}
</style>
</head>
<body>
<div>
<nav class="navbar fixed-top navbar-expand-lg py-0" style="background-color: #00695c;">
<a class="navbar-brand" href="/dashboard/">
<img src="/images/logo.webp" width="40" height="40" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-2">
<a class="nav-link" href="#">Shop Manager</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Customer Care</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Messenger Order</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div class="content">
<h1>Hello</h1>
</div>
</body>
</html>
如有进一步疑问，请随时发表评论