Have a fixed position div that needs to scroll if content overflows
CssScrollCss PositionOverflowCss Problem Overview
I have actually two issues, but lets resolve the primary issue first as I believe the other is easier to address.
I have a fixed position div on the left side of the scroll for a menu. Right side is a standard div that scrolls properly. The issue is that when the browser view-port is too small to see the entire menu.. there is no way to get it to scroll that I can find (at least not with css). I've tried using different overflows in css, but nothing makes the div scroll. The div that contains the menu is set to min-height:100% and position:fixed.. both attributes I need to keep.
The div containing the menu is inside another wrapper div that is positioned absolutely and height set to 100%.
How can I get it to scroll vertically if the content is too tall for the div?
That leads me to the other issue, that i don't want a scroll bar to display.. but I think I may already have an answer to that (only it doesn't work yet because I can't get the div to scroll to begin with).
Any solutions? Perhaps javascript is needed? (of which i know little about)
and the relevant code that is causing the issue (since posting the whole thing in here is waaay too long):
.fixed-content {
min-height:100%;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Also tried adding height:100% as well just to see if that was an issue but it didn't work either... nor did a fixed height, such as 600px.
Css Solutions
Solution 1 - Css
The problem with using height:100%
is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it
You can use fixed
to accomplish what you're trying to do.
.fixed-content {
top: 0;
bottom:0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
This fork of your fiddle shows my fix: http://jsfiddle.net/strider820/84AsW/1/
Solution 2 - Css
The solutions here didn't work for me as I'm styling react components.
What worked though for the sidebar was
.sidebar{
position: sticky;
top: 0;
}
Hope this helps someone.
Solution 3 - Css
Generally speaking, fixed section should be set with width
, height
and top
, bottom
properties, otherwise it won't recognise its size and position.
If the used box is direct child for body and has neighbours, then it makes sense to check z-index
and top, left
properties, since they could overlap each other, which might affect your mouse hover while scrolling the content.
Here is the solution for a content box (a direct child of body
tag) which is commonly used along with mobile navigation.
.fixed-content {
position: fixed;
top: 0;
bottom:0;
width: 100vw; /* viewport width */
height: 100vh; /* viewport height */
overflow-y: scroll;
overflow-x: hidden;
}
Hope it helps anybody. Thank you!
Solution 4 - Css
Here are both fixes.
First, regarding the fixed sidebar, you need to give it a height for it to overflow:
HTML Code:
<div id="sidebar">Menu</div>
<div id="content">Text</div>
CSS Code:
body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}
@media screen and (max-height:200px){
#sidebar {color:blue; font-size:50%;}
}
Live example: http://jsfiddle.net/RWxGX/3/
It's impossible NOT to get a scroll bar if your content overflows the height of the div. That's why I've added a media query for screen height. Maybe you can adjust your styles for short screen sizes so the scroll doesn't need to appear.
Cheers, Ignacio
Solution 5 - Css
Leaving an answer for anyone looking to do something similar but in a horizontal direction, like I wanted to.
Tweaking @strider820's answer like below will do the magic:
.fixed-content { //comments showing what I replaced.
left:0; //top: 0;
right:0; //bottom:0;
position:fixed;
overflow-y:hidden; //overflow-y:scroll;
overflow-x:auto; //overflow-x:hidden;
}
That's it. Also check this comment where @train explained using overflow:auto
over overflow:scroll
.