There is a menu block, its height is 130%, with the iPhone 6 its height is more than enough, but with the iPhone 4 it becomes small, how to make the height automatically adjust, considering that it scrolls through the height:auto in this case does not fit

Iphone 6:

enter image description here

Iphone 4:

enter image description here

CSS:

 .swipemenu { width: 80%; background: #eeeeee; height: 130%; position: fixed; top: 4%; bottom: 0; margin: 0; left: -400px; -webkit-transition: left 0.3s; -moz-transition: left 0.3s; transition: left 0.3s; z-index: 2000; }

Shl. To set more height means to increase the block at other resolutions and it will be scrolled more, I do not need it.

  • I would set the parent 100vh, on top of it I would overlap the background color with a shading gradient, indicating that there is something below and you can scroll and accordingly give this opportunity. - Eduard Misk

1 answer 1

Example

Use for height unit of measurement vh - http://caniuse.com/#feat=viewport-units

If the entire content does not fit and goes beyond the area above or below the block, add the overflow-y: auto; property overflow-y: auto; This property adds a vertical scroll bar if necessary.

 .swipemenu { width: 80%; background: #eeeeee; overflow-y: auto; max-height: calc(100vh - 4%); position: fixed; top: 4%; bottom: 0; margin: 0; left: 0px; -webkit-transition: left 0.3s; -moz-transition: left 0.3s; transition: left 0.3s; z-index: 2000; } .swipemenu ul { padding: 10px 0; } .swipemenu ul a { display: block; padding: 5px 20px; } .swipemenu ul a:hover { color: white; background: blue; } 
 <div class="swipemenu"> <ul> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> <li><a href="#">Menu link</a></li> </ul> </div>