【发布时间】：2020-12-23 18:41:40
【问题描述】：
我无法解决的问题是，当我将导航栏位置设置为固定时，它位于“content-wrapper”之下。当然，如果我给内容包装器“margin-top”，我可以解决这个问题，但是如何在不使用任何我想要的地方的情况下解决这个问题？
总而言之，我将“navbar-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: 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>【问题讨论】：
-
您可以使用
position: sticky或css-grid来完成您的设计，而无需使用相对位置和绝对位置以及您首先面临的问题。 -
如果我理解您的问题，最简单的做法是更改
.content-wrapper{ 4.3rem 2.2rem 2.2rem }。您必须使用margin: 3rem、position: relative; top: 25px;或transform: translateY(2rem)以一种或另一种方式将其向下推。 -
@tacoshy 我不明白怎么办？
-
@bjorn-b 没有边距和球就不能做？