我无法解决的问题是，当我将导航条的位置设置为固定时，它会进入"内容包装器"；。当然，如果我给内容包装器"；页边空白顶部"；但是，如果不在任何我想要的地方使用保证金，我该如何解决这个问题？
概括地说；导航条固定"；类既是静态的，也有按钮的帮助，但当我希望导航栏保持不变时，我希望"；内容"；导航栏跟随。
从现在开始谢谢你。
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
text-transform: none;
text-decoration: none;
}
.container {
position: relative;
display: flex;
height: 100%;
min-height: 100%;
}
.container .side-menu {
box-sizing: border-box;
display: flex;
background: #fff;
position: sticky;
height: 100vh;
width: 100%;
max-width: 260px;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .05);
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .05);
-webkit-transition: all .25s ease;
transition: all .25s ease;
z-index: 51000;
}
.container .content-area {
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
}
.navbar-content {
position: relative;
}
.navbar-wrapper {
background-repeat-x: repeat;
z-index: 41001;
width: 100%;
height: 103px;
background-repeat-y: no-repeat;
top: 0;
}
.navbar-fixed .navbar-wrapper {
position: fixed;
background: none;
}
@media (min-width: 1201px){
.container .navbar-wrapper {
width: calc(100% - 260px);
}
}
.navbar--main {
clear: both;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
width: 100%;
z-index: 10000;
position: relative;
}
.navbar-skeleton {
padding: .8rem 2.2rem;
-webkit-transition: all .5s;
}
.navbar-skeleton {
width: 100%;
transition: all .5s;
z-index: 10000;
}
.content-wrapper {
padding: 1.3rem 2.2rem 2.2rem;
}
.footer-padding {
padding: 1rem 2.2rem;
}
.footer-fixed footer {
width: 100%;
position: fixed;
background: #fff;
box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, .05);
bottom: 0;
}<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="container navbar-fixed footer-fixed">
<div class="side-menu">menu
</div>
<div class="content-area">
<div class="navbar-content">
<div class="navbar-wrapper">
<header class="navbar--main navbar-skeleton" style="background: rgb(255, 255, 255);">navbar</header>
</div>
</div>
<div class="content-wrapper">
<div class="router-view">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores consequatur corporis dolor dolorem eius eveniet expedita itaque magni minus natus neque, optio, perspiciatis quam, quod saepe soluta tempore temporibus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, sunt, voluptatum. Ab accusamus adipisci aperiam blanditiis, dicta dolor doloremque, ducimus ipsam libero, minima molestiae nam nesciunt odit possimus vero? Ex.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<footer class="footer-padding">COPYRIGHT ©2020 Pixinvent, All rights Reserved</footer>
</div>
</div>
</body>
</html>只需执行以下操作：
.navbar-content {
position: sticky;
top: 0;
}
.footer-fixed footer {
margin-top: auto;
position: sticky;
bottom: 0;
}
你可以摆脱position:fixed
全代码
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
text-transform: none;
text-decoration: none;
}
.container {
position: relative;
display: flex;
height: 100%;
min-height: 100%;
}
.container .side-menu {
box-sizing: border-box;
display: flex;
background: #fff;
position: sticky;
height: 100vh;
width: 100%;
max-width: 260px;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .05);
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .05);
-webkit-transition: all .25s ease;
transition: all .25s ease;
z-index: 51000;
}
.container .content-area {
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
}
.navbar-content {
position: sticky;
top: 0;
}
@media (min-width: 1201px){
.container .navbar-wrapper {
width: calc(100% - 260px);
}
}
.navbar--main {
clear: both;
display: flex;
align-items: center;
justify-content: space-between;
-webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
width: 100%;
z-index: 10000;
position: relative;
}
.navbar-skeleton {
padding: .8rem 2.2rem;
-webkit-transition: all .5s;
}
.navbar-skeleton {
width: 100%;
transition: all .5s;
z-index: 10000;
}
.content-wrapper {
padding: 1.3rem 2.2rem 2.2rem;
}
.footer-padding {
padding: 1rem 2.2rem;
}
.footer-fixed footer {
margin-top: auto;
position: sticky;
background: #fff;
box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, .05);
bottom: 0;
}<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="container navbar-fixed footer-fixed">
<div class="side-menu">menu
</div>
<div class="content-area">
<div class="navbar-content">
<div class="navbar-wrapper">
<header class="navbar--main navbar-skeleton" style="background: rgb(255, 255, 255);">navbar</header>
</div>
</div>
<div class="content-wrapper">
<div class="router-view">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores consequatur corporis dolor dolorem eius eveniet expedita itaque magni minus natus neque, optio, perspiciatis quam, quod saepe soluta tempore temporibus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, sunt, voluptatum. Ab accusamus adipisci aperiam blanditiis, dicta dolor doloremque, ducimus ipsam libero, minima molestiae nam nesciunt odit possimus vero? Ex.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<footer class="footer-padding">COPYRIGHT ©2020 Pixinvent, All rights Reserved</footer>
</div>
</div>
</body>
</html>