CODEWITHSUNDEEP
htmlcssscroll
Mohammad
Mohammad

Reputation: 3547

how make side menu fixed if its height exceeds the window?

I have a page with the following structure:

--------------------     //screen begin here
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
--------------------     //screen end here.
- MMM CCCCCCCCCCCC -
-     CCCCCCCCCCCC -
-     CCCCCCCCCCCC -

so the left menu MMM height is exceeds the height of screen, and also the content ccc exceeds the screen length too, what I want is to make the left menu and the content scrolls together till the left menu reach its bottom, then the left menu should be fixed and the content continue scrolling, any help?

Upvotes: 0

Views: 301

Answers (1)

JoKr
JoKr

Reputation: 86

To make the position of menu "fixed" just by CSS atribute "position:fixed" would be fatal. Because even when you scroll that page, you would never see the 'overfloating' area of menu. (Even atribute "overflow: scroll" won't help you.)

For visualisation I use your example. Page visitor won't be able to see the area marked as F.

--------------------     //screen begin here
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
--------------------     //screen end here.
- FFF CCCCCCCCCCCC -
-     CCCCCCCCCCCC -
-     CCCCCCCCCCCC -

Best solution is to use media-query and if the visitor got a smaller screen than your menu is, tinker with font-size, line-height or such. Simply, make the menu area smaller.

This could be the CSS markup you could use:

#menu{
    font-size: inherit;
    line-height: inherit;
    background: yellow;
}
@media (max-height: 1024px) {
    #menu{
        font-size: 0.8em;
        line-height: 0.8em;
        background: red;
    }
}

This should work in all modern browsers. You still can add the "fixed" here, but keep in mind the limitation of the user screen size.

And one more thing. You could use viewport sized typography (based on heights). More about it here: http://css-tricks.com/viewport-sized-typography/

Upvotes: 1

Related Questions