我正在努力确保我的导航栏和页脚保持固定。我已经将两个位置都设置为固定，还尝试将导航栏的顶部设置为0，将页脚的底部设置为0。但我仍然没有得到期望的结果。请帮帮我。
HTML代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Archers</title>
<link rel="stylesheet" href="arch.css">
</head>
<body>
<section id="main">
<div class="parentDiv " >
<div class=" contentDiv>
<div id=" menu">
<div id="navbar">
<nav>
<ul class="ul-style ">
<li><a href="#portfolio">OUR PORTFOLIO</a></li>
<li><a href="#process">OUR PROCESS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#main">HOME</a></li>
</ul>
</nav>
</div>
</div>
<div class="mainbg boxshadow"></div>
</div>
</section>
<section id="about" >
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #about"></a>
</div>
<div class="aboutbg boxshadow"></div>
</div>
</section>
<section id=" process">
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #process"></a>
</div>
<div class="processbg boxshadow"></div>
</div>
</section>
<section id=" portfolio">
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #portfolio"></a>
</div>
<div class="portfoliobg boxshadow"></div>
</div>
</section>
<footer>
2020 DeborahPalmTree
</footer>
<script src="index.js" charset="utf-8"></script>
</body>
</html>```
***CSS CODE***
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
#navbar {
width: 100%;
height: calc (100% - 58px);
background-color: rgba(219, 219, 219, 1.0);
position: fixed;
}
ul li {
list-style: none;
float: right;
margin: 20px;
}
li a {
text-decoration: none;
color: #ffffff;
}
.bg1 {
background-color: rgba(219, 219, 219, 1.0);
}
.boxshadow {
box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5);
}
.parentDiv {
max-width: 100%;
perspective: 500px;
height: 100%;
}
.mainbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
255, 255, 0.5)), url('structural-images/img_house_trees.jpg');
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
}
.aboutbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img_construction_site.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.processbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img_arc_plan.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.portfoliobg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img-structure-garden-car-park.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
#footer {
position: fixed;
height: 50px;
width: 100%;
background-color: rgba(219, 219, 219, 1.0);
}
您需要应用以下css，因为您没有为页脚分配任何id
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
padding: 10px;
background-color: #ddd;
}
如果你可以更改以下html结构，我会建议你这样做，因为你可以更好地控制和风格
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Archers</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
#navbar {
width: 100%;
height: calc (100% - 58px);
background-color: rgba(219, 219, 219, 1.0);
position: fixed;
}
ul li {
list-style: none;
float: right;
margin: 20px;
}
li a {
text-decoration: none;
color: #ffffff;
}
.bg1 {
background-color: rgba(219, 219, 219, 1.0);
}
.boxshadow {
box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5);
}
.parentDiv {
max-width: 100%;
perspective: 500px;
height: 100%;
}
.mainbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
255, 255, 0.5)), url('structural-images/img_house_trees.jpg');
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
}
.aboutbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img_construction_site.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.processbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img_arc_plan.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.portfoliobg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img-structure-garden-car-park.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
#footer {
position: fixed;
height: 50px;
width: 100%;
background-color: rgba(219, 219, 219, 1.0);
}
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
padding: 10px;
background-color: #ddd;
}
.main-body {
margin: 58px 0 38px 0;
}
#navbar {
width: 100%;
background-color: rgb(221, 221, 221);
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
</style>
</head>
<body contenteditable="false">
<div id="navbar">
<nav>
<ul class="ul-style ">
<li><a href="#portfolio">OUR PORTFOLIO</a></li>
<li><a href="#process">OUR PROCESS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#main">HOME</a></li>
</ul>
</nav>
</div>
<div class="main-body">
<section id="main">
<div class="parentDiv ">
<div class=" contentDiv>
<div id=" menu"="">
</div>
<div class="mainbg boxshadow"></div>
</div>
</section>
<section id="about">
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #about"="">
</div>
<div class="aboutbg boxshadow"></div>
</div>
</section>
<section id=" process">
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #process"="">
</div>
<div class="processbg boxshadow"></div>
</div>
</section>
<section id="portfolio">
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #portfolio"="">
</div>
<div class="portfoliobg boxshadow"></div>
</div>
</section>
</div>
<footer>
2020 DeborahPalmTree
</footer>
<script src="index.js" charset="utf-8"></script>
</body></html>请使用z-index，并用固定项溢出属性。
更新的CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
#navbar {
width: 100%;
height: calc (100% - 58px);
background-color: rgba(219, 219, 219, 1.0);
position: fixed;
top:0px;
left:0px;
z-index:10;
overflow:hidden;
}
ul li {
list-style: none;
float: right;
margin: 20px;
}
li a {
text-decoration: none;
color: #ffffff;
}
.bg1 {
background-color: rgba(219, 219, 219, 1.0);
}
.boxshadow {
box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5);
}
.parentDiv {
max-width: 100%;
perspective: 500px;
height: 100%;
}
.mainbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
255, 255, 0.5)), url('structural-images/img_house_trees.jpg');
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
}
.aboutbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img_construction_site.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.processbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img_arc_plan.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.portfoliobg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img-structure-garden-car-park.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
#footer {
position: fixed;
height: 50px;
width: 100%;
background-color: rgba(219, 219, 219, 1.0);
bottom:0px;
left:0px;
z-index:10;
overflow:hidden;
}