个人中心
gpt4 book ai didi

html - 是什么导致滚动条落后于固定的div

转载 作者：太空宇宙 更新时间：2023-11-04 06:16:46 24 4
gpt4 key购买 nike

我的网页顶部有一个固定的导航菜单，网页右侧有另一个导航菜单。但是，我的顶部(固定)导航菜单导致滚动条位于导航菜单 div 的后面。我尝试寻找解决方案，发现我应该删除 overflow: auto 在我的 html 中，body 选择器。但是，如果我这样做，则右侧的导航菜单不会扩展到文档的整个高度 (100%)。我该如何解决这个问题？

html,
body {
  height: 100%;
  background-color: white;
  margin: 0px;
  padding: 0px;
  font-family: "Gill Sans", sans-serif;
  overflow: auto;
  z-index: 50;
}

body {
  min-height: 100%;
}

.navigation-menu {
  position: fixed;
  top: 0px;
  width: 100%;
  background-color: black;
  z-index: 60;
}

.menu {
  position: relative;
  top: 0px;
  list-style: none;
  padding: 0px;
  margin: 0px;
  background-color: #6157CC;
}

.navigation-menu a {
  float: left;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

h1 {
  color: #6157CC;
  text-align: center;
  position: relative;
  top: 90px;
  z-index: 1;
  margin: 0px 0px 0px 170px;
}

.contents {
  float: left;
  position: absolute;
  width: 15%;
  height: 100%;
  background-color: red;
  z-index: 5;
  display: block;
  overflow: auto;
}

#plants {
  list-style: none;
  position: absolute;
  top: 3%;
  text-align: center;
}

#plants a {
  position: relative;
  display: block;
  padding: 25px 10px;
  top: 20px;
  color: white;
  text-decoration: none;
}

.plants-definition {
  position: relative;
  float: right;
  width: 85%;
  top: 80px;
  left: 0px;
}

p {
  margin: 20px 50px;
}

h2 {
  padding: 55px 0px 0px 0px;
  margin: 0px 50px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="Nature.CSS">
  <meta charset="UTF-8">
  <title>Nature</title>
</head>

<body>
  <div class="navigation-menu">
    <nav>
      <ul class="menu">
        <li><a>Home</a></li>
        <li><a>Plants</a></li>
        <li><a>Animals</a></li>
        <li><a>Oceans</a></li>
      </ul>
    </nav>
  </div>

  <div class="contents">
    <ul id="plants">
      <li><a>Trees</a></li>
      <li><a>Flowers</a></li>
      <li><a>Water Plants</a></li>
    </ul>
  </div>

  <div>
    <h1>Plants</h1>
  </div>

  <div class="plants-definition">
    <h2>Trees</h2>
    <p>In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower, including only woody plants with secondary growth, plants that are usable
      as lumber or plants above a specified height. Trees are not a taxonomic group but include a variety of plant species that have independently evolved a woody trunk and branches as a way to tower above other plants to compete for sunlight. Trees tend
      to be long-lived, some reaching several thousand years old. In wider definitions, the taller palms, tree ferns, bananas, and bamboos are also trees. Trees have been in existence for 370 million years. It is estimated that there are just over 3 trillion
      mature trees in the world</p>
  </div>

  <div>
    <h2>Flowers</h2>
    <p></p>
  </div>

  <div class="plants-definition">
    <h2>Flowers</h2>
    <p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants (plants of the division Magnoliophyta, also called angiosperms). The biological function of a flower is to effect reproduction, usually by providing
      a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing (fusion of sperm and eggs from different individuals in a population) or allow selfing (fusion of sperm and egg from the same flower). Some flowers produce diaspores
      without fertilization (parthenocarpy). Flowers contain sporangia and are the site where gametophytes develop. Many flowers have evolved to be attractive to animals, so as to cause them to be vectors for the transfer of pollen. After fertilization,
      the ovary of the flower develops into fruit containing seeds.</p>
  </div>

  <div class="plants-definition">
    <h2>Water Plants</h2>
    <p>Aquatic plants are plants that have adapted to living in aquatic environments (saltwater or freshwater). They are also referred to as hydrophytes or macrophytes. A macrophyte is an aquatic plant that grows in or near water and is either emergent,
      submergent, or floating, and includes helophytes (a plant that grows in marsh, partly submerged in water, so that it regrows from buds below the water surface).[1] In lakes and rivers macrophytes provide cover for fish and substrate for aquatic
      invertebrates, produce oxygen, and act as food for some fish and wildlife.</p>
  </div>



</body>

</html>

https://jsfiddle.net/e679hmx4/2/

(我知道现在看起来一点都不好看，但我想你应该能理解大概的意思)。

最佳答案

您的问题是因为 html, body 上的 overflow: auto。如果您删除它，您的滚动条将按预期显示:

html, body {  height: 100%;  background-color: white;  margin: 0px;  padding: 0px;  font-family: "Gill Sans", sans-serif;  
  
   overflow: auto;
    z-index: 50;}

Once you've done this, you'll also need to set your side navbar (.content) to position: fixed such that it fills the correct height.

See example below:

html,
body {
  height: 100%;
  background-color: white;
  margin: 0px;
  padding: 0px;
  font-family: "Gill Sans", sans-serif;
  z-index: 50;
}

body {
  min-height: 100%;
}

.navigation-menu {
  position: fixed;
  top: 0px;
  width: 100%;
  background-color: black;
  z-index: 60;
}

.menu {
  position: relative;
  top: 0px;
  list-style: none;
  padding: 0px;
  margin: 0px;
  background-color: #6157CC;
}

.navigation-menu a {
  float: left;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

h1 {
  color: #6157CC;
  text-align: center;
  position: relative;
  top: 90px;
  z-index: 1;
  margin: 0px 0px 0px 170px;
}

.contents {
  float: left;
  position: fixed;
  /* change position to fixed */
  width: 15%;
  height: 100%;
  background-color: red;
  z-index: 5;
  display: block;
  overflow: auto;
}

#plants {
  list-style: none;
  position: absolute;
  top: 3%;
  text-align: center;
}

#plants a {
  position: relative;
  display: block;
  padding: 25px 10px;
  top: 20px;
  color: white;
  text-decoration: none;
}

.plants-definition {
  position: relative;
  float: right;
  width: 85%;
  top: 80px;
  left: 0px;
}

p {
  margin: 20px 50px;
}

h2 {
  padding: 55px 0px 0px 0px;
  margin: 0px 50px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="Nature.CSS">
  <meta charset="UTF-8">
  <title>Nature</title>
</head>

<body>
  <div class="navigation-menu">
    <nav>
      <ul class="menu">
        <li><a>Home</a></li>
        <li><a>Plants</a></li>
        <li><a>Animals</a></li>
        <li><a>Oceans</a></li>
      </ul>
    </nav>
  </div>

  <div class="contents">
    <ul id="plants">
      <li><a>Trees</a></li>
      <li><a>Flowers</a></li>
      <li><a>Water Plants</a></li>
    </ul>
  </div>

  <div>
    <h1>Plants</h1>
  </div>

  <div class="plants-definition">
    <h2>Trees</h2>
    <p>In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower, including only woody plants with secondary growth, plants that are usable
      as lumber or plants above a specified height. Trees are not a taxonomic group but include a variety of plant species that have independently evolved a woody trunk and branches as a way to tower above other plants to compete for sunlight. Trees tend
      to be long-lived, some reaching several thousand years old. In wider definitions, the taller palms, tree ferns, bananas, and bamboos are also trees. Trees have been in existence for 370 million years. It is estimated that there are just over 3 trillion
      mature trees in the world</p>
  </div>

  <div>
    <h2>Flowers</h2>
    <p></p>
  </div>

  <div class="plants-definition">
    <h2>Flowers</h2>
    <p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants (plants of the division Magnoliophyta, also called angiosperms). The biological function of a flower is to effect reproduction, usually by providing
      a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing (fusion of sperm and eggs from different individuals in a population) or allow selfing (fusion of sperm and egg from the same flower). Some flowers produce diaspores
      without fertilization (parthenocarpy). Flowers contain sporangia and are the site where gametophytes develop. Many flowers have evolved to be attractive to animals, so as to cause them to be vectors for the transfer of pollen. After fertilization,
      the ovary of the flower develops into fruit containing seeds.</p>
  </div>

  <div class="plants-definition">
    <h2>Water Plants</h2>
    <p>Aquatic plants are plants that have adapted to living in aquatic environments (saltwater or freshwater). They are also referred to as hydrophytes or macrophytes. A macrophyte is an aquatic plant that grows in or near water and is either emergent,
      submergent, or floating, and includes helophytes (a plant that grows in marsh, partly submerged in water, so that it regrows from buds below the water surface).[1] In lakes and rivers macrophytes provide cover for fish and substrate for aquatic
      invertebrates, produce oxygen, and act as food for some fish and wildlife.</p>
  </div>



</body>

</html>

关于html - 是什么导致滚动条落后于固定的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55889942/

24 4 0
文章推荐： c - 在 scanf 函数中使用指向矩阵的指针
文章推荐： java - 如何在 IntelliJ IDEA 中默认将文件夹指定为源文件夹？
文章推荐： c - 四舍五入甚至没有始终如一地应用？
文章推荐： c - c中的json相似对象
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com