文章/答案/技术大牛

发布

问导航菜单和页脚不固定
EN

Stack Overflow用户

提问于 2020-04-20 04:27:06

回答 2查看 410关注 0票数 0

我正在努力确保我的导航条和页脚保持固定，我已经将两个位置都设置为固定的，同时也尝试设置顶部:0表示导航条和底部: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);
}

footer

fixed

html

css

navbar

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-20 04:44:22

您需要在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>

票数 1

Stack Overflow用户

发布于 2020-04-20 04:35:12

请在固定项中使用z索引和溢出属性.

更新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;
    }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61315117

复制

相似问题

问导航菜单和页脚不固定
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航菜单和页脚不固定EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航菜单和页脚不固定
EN