Reputation: 1

What causes the scrollbar to go behind fixed div

I have a fixed navigation menu at the top of my webpage and another one on the right side of the webpage. However my top (fixed) navigation menu causes the scrollbar to go behind the navigation menu div. I have tried searching for solutions and found that I should delete overflow: auto in my html, body selectors. However if I do that, then the navigation menu on the right side doesn't extend to the full height of the document (100%). How can I fix this?

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/

(I know it doesn't look pretty at all now, but I think you should be able to understand the general idea).

Upvotes: 0

Answers (2)

Nick Parsons

Reputation: 50759

Your issue is because of overflow: auto on your html, body. If you remove this your scrollbar will appear as expected:

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>

Upvotes: 1

Taylor Stocks

Reputation: 167

Removing overflow: auto; on html, body will stop this from happening, also I would avoid adding z-index to body and html tags.

Upvotes: 0

What causes the scrollbar to go behind fixed div

Answers (2)

Related Questions