CSS Scroll-problem overflow-y (scrollbar is there, but I can't scroll)

Question

Here is a screenschot of what I want: https://gyazo.com/a96db0095968cbb9366674c120d3feed

So, I disabled overflow-y (hidden) in the body, and I added a overflow-y:scroll in the wrapper.

The bar is showing but nothing happens if I try to scroll. I guess it could have something to do with the flex items (I commented every element in the .css, and checked if it works, and it worked, but I forgot which element and which style it was.

I tested every line of style after that, and never found the element again. So I know, somehow it must work.

Also if I do the scrollbar on the body, it works perfectly, just if I put it on the wrapper.

Here's my CSS and HTML:

@charset "utf-8";

/* CSS Document */

body {
  padding: 0px;
  margin: 0;
  background-color: lightgray;
  overflow-y: hidden;
  background-image: url("Bilder/Panorama.jpg");
}

header {
  margin: 0px;
  padding: 0px;
  width: 100%;
  background-color: brown;
  position: fixed;
  display: block;
  box-shadow: 10px 1px 40px grey;
}

/* *********************************
			PC Styles 
	********************************/
@media only screen and (min-width: 481px) {
  #Wrapper {
    overflow-y: scroll !important;
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
    width: 70%;
    min-height: 860px;
    margin-left: auto;
    margin-right: auto;
    background-color: darkslategray;
    position: relative;
    top: 70px;
  }
  header h1 {
    font-family: 'Orbitron';
    margin: 0px;
    margin-left: 20%;
    line-height: 70px;
    text-decoration: underline;
  }
  /* NAVIGATION */
  .navbar {
    margin: 0px;
    padding: 0;
    position: absolute;
    top: -0.7%;
    right: 0%;
  }
  .navitem {
    background-color: cadetblue;
    margin: 0px;
    padding: 0.6em;
    list-style-type: none;
    display: inline;
    margin-right: 0.6em;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  a {
    font-family: 'Gudea';
    color: brown;
    font-weight: 700;
    font-size: 2em;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    position: relative;
    top: 0.1em;
  }
  .navitem:hover {
    background-color: skyblue;
    margin: 0px;
    padding: 0.6em;
    list-style-type: none;
    display: inline;
    margin-right: 0.6em;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    transition: 500ms ease;
  }
  a:hover {
    background-color: skyblue;
    font-family: 'Gudea';
    font-size: 2em;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    position: relative;
    top: 0.1em;
    transition: 500ms ease;
  }
  .active {
    background-color: skyblue;
    transition: 500ms ease;
  }
  /* NAVIGATION ENDE */
  main img {
    height: 38em;
    width: 38em;
    margin-left: 2em;
  }
  #flexcontainermain {
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    margin-top: 8%;
    justify-content: space-around;
  }
  #flexcontainer1 {
    display: flex;
    flex-direction: column;
    align-content: center;
  }
  .flexitemmain {
    /* Unser Bild */
    margin: 1%;
  }
  .flexitem {
    font-family: 'PT Sans Narrow';
    color: coral;
    font-size: 90%;
    text-shadow: 1px 1px 1px #000;
    margin: 4%;
    display: flex;
    flex-direction: row;
  }
  /**********************************
		Handy-Styles
	*********************************/
  @media only screen and (max-width: 480px) {
  }

<!doctype html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Gudea" rel="stylesheet">

  <meta charset="utf-8">
  <link href="css/normalize.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <title>Tom - Projekte</title>
</head>

<body>
  <header>
    <h1>Tom's Website</h1>
  </header>
  <div id="Wrapper">
    <ul class="navbar">
      <li class="navitem active"><a href="index.html" class="active">Startseite</a></li>
      <li class="navitem"><a href="lebenslauf.pdf">Lebenslauf</a></li>
      <li class="navitem"><a href="Portfolio.html">Portfolio</a></li>
    </ul>
    <div id="all">
      <div id="flexcontainermain">
        <div class="flexcontainer1">
          <div class="flexitem">
            <h2>Mein Name ist Tobi Smith und ich bin 20 Jahre alt.<br><br> Ich wurde am 13.09.1998 in Mönchengladbach geboren, und lebe seit dem hier.<br> Derzeit zusammen mit meiner Freundin(links zu sehen) in einer kleinen Wohnung.<br><br>In meiner Freizeit
              programmiere ich sehr gerne, und bilde mich im Informatikbereich weiter. Dabei spezialisiere ich mich auf den Web-Bereich und arbeite derzeit mit:</h2>
          </div>
        </div>
        <div class="flexcontainer1">
          <div class="flexitemmain">
            <img src="Bilder/us.jpeg">
          </div>
        </div>
      </div>
      <h2>Mein Name ist Tom </h2>H2>
      <h2>Mein Name ist Tom </h2>H2>
      <h2>Mein Name ist Tom </h2>H2>
      <h2>Mein Name ist Tom </h2>H2>
      <h2>Mein Name ist Tom </h2>H2>
    </div>
    <footer>
    </footer>
  </div>
</body>

</html>

I just tested to make a div around EVERYTHING, right after the body, made it scrollable and it worked. Just if I make the Wrapper scrollable, it doesn't work. — Tobi Smith
– Tobi Smith, Commented Sep 24, 2018 at 15:12

Cnye · Accepted Answer · 2018-09-24 15:33:49Z

3

Add this to your #Wrapper class:

#Wrapper {
    height: calc(100vh - 70px);
    min-height: 100%;
}

Refer to this doc to fully understand VH and VW properties: https://css-tricks.com/fun-viewport-units

100vh is going to stretch the #Wrapper from the top and bottom of the viewport.

I have subtracted 70px from 100vh because the #Wrapper is being positioned 70px from the top, which is also the same height as the navbar, so this calculation will consider all of the above when working out the height.

Here is a working fiddle: https://jsfiddle.net/Ly06krt3/18/

edited Sep 24, 2018 at 15:33

answered Sep 24, 2018 at 15:28

Cnye

3851 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tobi Smith Over a year ago

Wow! Worked like a charm! About to learn all the viewport things. I find it complicated as shit, worked with % all the time, until yesterday. It's a really change to switch to responsive design, but % and the media queries are really cool also. Thank's for the "vw and vh" thing, I will use it more often.

Cnye Over a year ago

No worries. Really consider using Bootstrap or Tailwind these days as they help build simple layouts and structure with minimal effort.

Collectives™ on Stack Overflow

CSS Scroll-problem overflow-y (scrollbar is there, but I can't scroll)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related