Geek Answers Handbook

How to set div to use a certain percentage of height when using overflow: auto to set scrollbar?

I have the following code:

div.leftnav { overflow: auto ; height: 50% ; }

This, when I set the large div of this class, does not work (it does not show the scroll bar and does not resize it to 50%, however it works fine if used instead

 height: 400px ;

Or some other “absolute” meaning.

+6
html css scrollbar
source share
1 answer
Height

will only work if the parent also has a height instruction.

So you have really simple markup:

 <html> <body> <div class="leftnav"> really long text </div> </body> </html>

Then the following CSS will work for you:

 div.leftnav { overflow: auto ; height: 50%; } html, body { height:100%; }

However, you need to have height instructions. If there is no height instruction on one of the parent elements, then 100% will mean nothing for the div. If you cannot access all the elements down the tree, you will need a parent element with a fixed height:

 <div class="leftnav-container"> <div class="leftnav"> really long text </div> </div>

Then you need this css:

 div.leftnav { overflow: auto ; height: 50%; } div.leftnav-container { height : 500px; }
+11
source share

More articles:


All Articles