Question

我在网页顶部有一个固定的导航菜单，在网页右侧有一个导航菜单。但是，我的顶部（固定）导航菜单使滚动条位于导航菜单div的后面。我尝试搜索解决方案，发现应该删除溢出：html主体选择器中的auto。但是，如果我这样做，则右侧的导航菜单不会扩展到文档的整个高度（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/

（我知道它现在看起来并不漂亮，但是我认为您应该能够理解总体思路。）

Answer 1

您的问题是由于overflow: auto上的html, body。如果删除此选项，则滚动条将按预期显示：

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

完成此操作后，还需要将侧面导航栏（.content）设置为position: fixed，以使其填充正确的高度。

请参见以下示例：

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>

Answer 2

在html上删除private void observeShouldShow() { mainViewModel.uiUtils.getShouldShow().observe(this, new Observer<Boolean>() { @Override public void onChanged(Boolean aBoolean) { ViewGroup.LayoutParams layoutParams = binding.bottomNavigation.getLayoutParams(); if (mainViewModel.getUiUtils().getShouldShow().getValue()) { binding.bottomNavigation.setVisibility(View.VISIBLE); layoutParams.height = 170; binding.bottomNavigation.setLayoutParams(layoutParams); } else { layoutParams.height = 0; binding.bottomNavigation.setLayoutParams(layoutParams); binding.bottomNavigation.setVisibility(View.INVISIBLE); } } });，body可以阻止这种情况的发生，而且我也避免将z-index添加到body和html标签。

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

2 个答案: