CSS: Make only side menu scrollable

Question

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
}

score 5 · Answer 1 · edited Dec 19 '15 at 06:18

5

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;
}

edited Dec 19 '15 at 06:18

user3413723

11,147
6
55
64

answered Apr 03 '14 at 08:39

HaydnJW

337
1
13

score 3 · Accepted Answer · edited Aug 02 '17 at 08:44

3

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;

http://jsfiddle.net/zsSrZ/4/

#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;
}

edited Aug 02 '17 at 08:44

Dirk Vollmar

172,527
53
255
316

answered Apr 03 '14 at 08:12

Christopher Reid

4,318
3
35
74

1

5 years later. thanks for this awesome little time saver – Digit Plays Dec 09 '19 at 15:22
@DigitPlays glad my past self could help :) – Christopher Reid Dec 09 '19 at 20:25

score 1 · Answer 3 · answered Apr 03 '14 at 00:04

1

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;
 }

answered Apr 03 '14 at 00:04

Provision

273
1
10

http://jsfiddle.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? – Christopher Reid Apr 03 '14 at 00:10
Odd, it had worked earlier, but now it just occured to me that it was using Mozilla FireFox – Provision Apr 03 '14 at 06:45

CSS: Make only side menu scrollable

3 Answers3