2

Example: http://jsfiddle.net/3p9urx4y/ I am trying to make mobile navigation that has to be placed under the header. But if I am specifying the next properties:

.list {
   top: 50px;
   overflow-y: scroll;
 }

The last 50px of the content is missing because top property is not zero. I was trying to make the outer div with padding-top of 50px, but in this case scrolling appears at header area and this is not expected behavior. We could specify the margin-bottom of the last list child and that helps:

.item:last-child {
    margin-bottom: 50px;
}

But that is the trick and I am trying to find better solution. I have found this question Scroll part of content in fixed position container but I need something different. My header has to be fixed and navigation menu has to slide from the right side when user clicks the navigation button.

Edited: http://jsfiddle.net/3p9urx4y/ new example

Misha Kysliuk
  • 71
  • 7

2 Answers2

2

Your .list has height: 100vh, so it will occupie the equivalent of 100% of the screen's height no matter its position.

One solution would be setting the list height to calc(100vh - 50px). I've edited the fiddle.

The calc function allows you to execute calculation when specifying a css property. More information here.

Pedro leal
  • 174
  • 2
  • 8
  • I like this solution and it works fine. But only one question, does IE supports calc functions? :D – Misha Kysliuk Feb 14 '19 at 22:09
  • According to https://caniuse.com/#feat=calc, it is partially supported by IE 9+, meaning that it does not work in many use cases. I don't think there's any problem with your case. Just try it out. – Pedro leal Feb 14 '19 at 23:13
0

Give the header a position of fixed, a height and a width, don't forget to give it a z-index...then your navigation below it should be fine I can toss it more suggestions it you need me #cheers

Monday A Victor
  • 441
  • 5
  • 16
  • If it is positioned absolute, relative,or fixed other floating elements with higher z-index will appear close to the user, giving the header a higher z-index will make everything floated element scroll under it. – Monday A Victor Feb 15 '19 at 08:38