我试图确保我的导航栏和页脚保持固定我已将两个位置设置为固定，并尝试设置导航栏的顶部：0和页脚的底部：0，但我仍然没有得到想要的结果，我尝试操纵和调整div 安排使代码更清晰并使其正常工作，但仍然没有得到预期的结果。请帮助我。HTML代码<html><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***
2 回答
holdtom
TA贡献1805条经验 获得超10个赞
您需要应用以下 css，因为您尚未为页脚分配任何 id
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
padding: 10px;
background-color: #ddd;
}
如果您可以更改它，我建议您使用下面的 html 结构，因为这样您就可以更好地控制和设计样式
<html><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>
守着星空守着你
TA贡献1799条经验 获得超8个赞
请使用 z-index 和 Overflow 属性与您的固定项目。
更新了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;
}
- 2 回答
- 0 关注
- 98 浏览
添加回答
举报
0/150
提交
取消