Show scrollbar when fixed element is higher than viewport

user_14597537 0
Viewed 31

I've been trying to add a scrollbar to my page when a fixed element (main in the example below) is higher than the viewport. This is problematic in mobile as it doesn't show the entire element

I've tried to add overflow-y: scroll to the element itself, the wrapper, the body etc. with no results.

section {
  background-color: lightblue;
  width: 100%;
  height: 100%;
}

header {
  height: 60px;
}

main {
  position: fixed;
  top: 50px;
  border: 3px solid blue;
  background-color: tomato;
  height: 400px;
  width: 400px;
}
<section>
  <header>
    Header
  </header>
  <main>
    Main - When this element overflows the viewport, I cant see the rest
  </main>
</section>

css-position overflow css html
1 Answers

I fixed by adding a wrapper containing the fixed and overflow properties as well as a height of 80% so I can scroll all the way down

section {
  background-color: lightblue;
  width: 100%;
  height: 100%;
}

header {
  height: 60px;
}
.mainWrapper{
  overflow: auto;
  position: fixed;
  top: 40px;
  height: 80%;
}

main {
  border: 3px solid blue;
  background-color: tomato;
  width: 400px;
}
<section>
  <header>
    Header
  </header>
    <div class="mainWrapper">
       <main>
          Main - When this element overflows the viewport, I cant see the rest
          Main - When this element overflows the viewport, I cant see the rest
          Main - When this element overflows the viewport, I cant see the rest
          Main - When this element overflows the viewport, I cant see the rest
          Main - When this element overflows the viewport, I cant see the rest
          Main - When this element overflows the viewport, I cant see the rest
          Main - When this element overflows the viewport, I cant see the rest
      </main>
    </div>
</section>

user_145975370
Related