导航菜单和页脚不固定

Question

我试图确保我的导航栏和页脚保持固定我已经将两个位置都设置为固定并且还尝试为导航栏设置 top:0 和页脚设置 bottom:0 但我仍然没有得到想要的结果，我试图操纵和调整 div 安排以使代码更清晰并使其正常工作，但仍然没有得到想要的 result.Please 帮助我。

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);
}

Answer 1

请使用 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;
    }

Answer 2

您需要在下面申请 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>

导航菜单和页脚不固定

navigation menu and footer not staying fixed

html

css

fixed

footer

navbar