CODEWITHSUNDEEP
htmlcssscroll
Oliver Spryn
Oliver Spryn

Reputation: 17368

CSS Fixed Positioning and Scrollbar

I have a navigation menu on my site which will transition to a full-screen slide-out menu whenever the user uses the site on a mobile device via media queries. However if the screen height is vertically too small to display the contents of the menu (e.g. wearables) I'd like the menu to have its own scrollbar.

Problem: The menu fits itself to the screen with a fixed position that is 0 pixels from all sides. However, even if I have a minimum height and an overflow: visible|auto property assigned to the menu, it still never shows its own scrollbar. Only the body one shows.

Example: http://jsfiddle.net/spryno724/fbhh15fo/ Try resizing the frame of the preview area to see what I mean.

Question: Anyone know how to get the menu to show its own scrollbar, if the screen height is too small. Again this menu has a fixed position which is 0 pixels from all sides.

Upvotes: 0

Views: 702

Answers (3)

Oliver Spryn
Oliver Spryn

Reputation: 17368

It turns out that by adding a media query, and specifying the height of the menu to 100% worked!

@media screen and (max-height: 380px) {
    ul.nav {
        min-height: 100%;
        overflow: auto;
    }
}

Upvotes: 0

Lakhan
Lakhan

Reputation: 13286

You need to change min-height to max-height in ul :

Before Change:

ul {
    background: #191919;
    bottom: 0;
    color: #EDEDED;
    left: 0;
    margin: 0;
    **min-height: 150px;**
    padding: 0;
    position: fixed;
    overflow: auto;
    right: 0;
    top: 0;
}

After Change :

ul {
    background: #191919;
    bottom: 0;
    color: #EDEDED;
    left: 0;
    margin: 0;
    **max-height: 150px;**
    padding: 0;
    position: fixed;
    overflow: auto;
    right: 0;
    top: 0;
}

JSFIDDLE DEMO

Upvotes: 0

user4639281
user4639281

Reputation:

This will make the menu max out at the viewport height.

Add

max-height: 100vh;

to the ul css section

ul {
    /* Lots of declarations */
    max-height: 100vh;
}

(Demo)

Upvotes: 1

Related Questions