CODEWITHSUNDEEP
htmlcssoverflowsidebar
Ganga
Ganga

Reputation: 797

Fixed sidebar with overflow

I have a problem with an overflow rule on my webpage. So I want to create 2/3, 1/3 layout where sidebar is fixed and links are anchor to Id's on 2/3 side.

I use this code to achieve that: 

#nav-side {
position: fixed;
width: auto;
height: 70%;
overflow-y: auto;
font-weight: bolder;}

So there is plenty of links and on smaller screen there is no way to grasp them all in this container, but on bigger i really don't want to have this scroll bars, how can i achieve that ?

Is there any way to do it without media rules ?

Also, how can I get rid off bottom horizontal scroll bar?

UPDATE:

I notice one more problem which puzzle me, sidebar goes on footer when displayed on smaller screen, content and scroll bar. Footer have z-index: 99999999999;

Upvotes: 0

Views: 6179

Answers (1)

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

add this rule to your #nav-side:

overflow-y: auto;

this way you will get vertical scroll only if there's overflow.

And for the footer add this rule for disabling horizontal scroll:

overflow-x: hidden;

UPDATE

Since you have position: fixed, which means the element is positioned relative to the browser window, you can add top or bottom rule and define how much you want the sidebar to be from the top/bottom.

Upvotes: 1

Related Questions