I have got a vertical menu on the left side of the screen, and i want to take 100% height of the resolution, but if the div(of the menu) needs more, i want to appear scroll. My question: I have got one div with height:100% and overflow auto. I need have the scroll only on that div, but this div must be 100% of the resolution of the screen. Now if i put like this, the scroll takes all the page, but if i put fixed height to the div it works correctly. But i need to be 100% height. Thank you very much!
5 Answers
http://cssdesk.com/yxShB http://gearsdigital.com/sandbox/ http://jsfiddle.net/WB4Qc/
Successfully tested in:
OSX
- FF 3.6
- Safari 4 + 5
- Chrome 47.0
WIN7
- IE 7
- IE 8
- FF 3.5
See my example above. The code works fine... Try to resize the window. You'll see once the bottom of the browser reaches the last list element an scrollbar appears on the menu div.
Html:
<div id="menu">
<ul>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
</ul>
</div>
Css:
* {margin:0;padding:0;}
html, body{
height:100%;
background:#eee;
}
#menu {
background:#ccc;
width:220px;
height:100%;
}
#menu ul {
height: 100%;
overflow: auto;
}
There is a farily simple answer to this, using height: 100% on both the HTML and body selectors in CSS, you can effectively tell the menu to be 100% of the height, but scroll when it needs to.
I have made an example for you here at jsFiddle.net. (resize the Result window to see the effect)
Hope it helps :)
I've completed gearsdigital response with a "content" div for the content of the page:
http://jsfiddle.net/Guillaume/NnW5r/11/show/
code: http://jsfiddle.net/Guillaume/NnW5r/11/
Resize the window and scroll the page to see if it fits your needs
Related