CODEWITHSUNDEEP
css
bsky
bsky

Reputation: 20222

CSS - make menu the size of the page

I have a vertical and extensible menu component within my page.

I want it to:

1.Occupy 100% of the screen's height.

2.Enable scrolling rather than extending underneath the screen.

for now, I am using the following CSS:

#enableScrolling {
    overflow-y: scroll;
    height: 100%;
}

However, the list extends underneath the screen instead of allowing scrolling. Therefore, using height: 100%; doesn't seem to work.

How should I do this correctly?

Upvotes: 0

Views: 47

Answers (3)

knocked loose
knocked loose

Reputation: 3304

You can either make the menu the size of the view port using the viewport height style

Solution 1

#enableScrolling{
height:100vh;
overflow-y:scroll;
}

Here is the JSFiddle Try scrolling the red, then begin scrolling in the blue. You will see that the red box is only as high as the window.

Or you can position it absolute to make it the height of the entire website like this:

Solution 2

#enableScrolling{
position:absolute;
top:0;
height:100%;
width:100%;
overflow-y:scroll;
}

With this second JSFiddle you can see that the red will take 100% height of the page, try scrolling the red, then scroll the blue. The red will never leave the viewport.

Solution 3 (modified off Solution 1)

If the element is not already at the top

You can apply some positioning to help move your element to the top, in the same way it works for answer 2.

#enableScrolling{
position:absolute;
/*position at top*/
top:0;
/*position at left*/
left:0;
height:100vh;
overflow-y:scroll;
}

Upvotes: 2

mstruebing
mstruebing

Reputation: 1792

Use vh insteadt of %.

vh means viewheight. It isn't the ultimate solution for all devices and browser but works better than %.

#enableScrolling {
    overflow-y: scroll;
    height: 100vh;
}

Upvotes: 1

Luís P. A.
Luís P. A.

Reputation: 9739

You can do this

CSS

#enableScrolling {
    height: 100vh;
}

Upvotes: 1

Related Questions