CSS: Make only side menu scrollable
Solution 1
I'm just giving you an example of how I did one of my tables using the overflow scroll. you should set a height then say if you want the scroll on the y axis or the x axis e.g. overflow-y.
The CSS for my table:
#exampletable {
margin-left: auto;
margin-right: auto;
overflow-y: auto;
height: 150px;
width: 680px;
}
Solution 2
I found a good way to do this with a variable height. Giving the menu position:absolute;
instead of float
you can anchor it with either top:0;
or bottom:0;
. Setting height:100%
restricts the menu to window height and overflow:scroll
lets you see what gets cut off. Everything else can be set to overflow:hidden;
#container {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: -1;
overflow: hidden;
background: red;
}
#menu {
width: 200px;
background: blue;
position: absolute;
overflow: scroll;
top: 0px;
height: 100%;
padding-top: 10px;
}
Solution 3
You can add "scroll" to the "overflow" property to make an objest scrollable and i used "overflow-y" to set the object to scroll horizontally instead of the defaut which is vertical scrolling.
<div id="menu">
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
</div>
<div id="container"></div>
#container {
position:absolute;
width:100%;
top:0;
bottom:0;
z-index:-1;
overflow:hidden;
background: #FF0000;
}
#menu {
overflow-y: scroll;
width:200px;
background: #FFFFFF;
float:left;
height:30px;
margin-top:54px
position: absolute;
}
Christopher Reid
I am a founder/CTO at On This Spot, a Vancouver based history-education-tourism app written in react-native, Swift, and Kotlin. I also helped create ceo.ca, a leading Canadian small-cap investment platform and consult and code for footwear startup casca shoes, casca.com. I am interested in scalable network architectures and implementations, real-time data stream processing, graphics programming, and sexy UI/UX... among other things. I am a javascript expert, proficient in python, and capable of writing working programs in Rust, C, Swift, Java and always looking to learn more and stay on the bleeding edge.
Updated on July 09, 2022Comments
-
Christopher Reid almost 2 years
EXAMPLE is here http://jsfiddle.net/zsSrZ/
The page itself is unscrollable and so is the content in
#container
but I can't figure out how to make the side navigation scrollable. In the example I have overfilled#menu
with li's so it spills off the page but You don't see it because overflow is set to off on the body.HTML
<div id="menu"> <ul> <li></li> . . . . . <li></li> </ul> </div> <div id="container"></div>
CSS
#container { position:absolute; width:100%; top:0; bottom:0; z-index:-1; overflow:hidden; background:red; } #menu { width:200px; background:white; float:left; height:100%; margin-top:54px }
-
Christopher Reid about 10 yearsjsfiddle.net/zsSrZ/1 here's your suggestion. You can't even see the menu anymore. Why did you set
#menu
height to 30px and position to absolute? -
Provision about 10 yearsOdd, it had worked earlier, but now it just occured to me that it was using Mozilla FireFox
-
Digit Plays over 4 years5 years later. thanks for this awesome little time saver
-
Christopher Reid over 4 years@DigitPlays glad my past self could help :)