Menu
I've come across numerous question of the similar nature but my situation is a bit different; my outer container is height 100% instead of a fixed height.
I have a bunch of divs inside a container. They overflow and I want to have a scrollbar to allow scrolling.
This is exactly what I want to achieve: http://jsfiddle.net/jcjw2jmo/
Except, the link I posted has a fixed height: 200px;. I want to have a percentage height instead.
I've tried setting a percentage height and max-height with no luck. Here's my progress: http://jsfiddle.net/k52eh0xr/
How do I get both the fiddles to have the same behaviour but with using percentages instead?
Thanks so much
PS. I know this can be done using Javascript/jQuery but I am looking for a CSS-only solution
689
To get the height of the scroll bar the offsetHeight of div is subtracted from the clientHeight of div. OffsetHeight = Height of an element + Scrollbar Height. ClientHeight = Height of an element. Height of scrollbar = offsetHeight – clientHeight.
Without content, the height has no value to calculate the percentage of. The width, however, will take the percentage from the DOM, if no parent is specified.
CSS height and width Values length - Defines the height/width in px, cm, etc. % - Defines the height/width in percent of the containing block. initial - Sets the height/width to its default value. inherit - The height/width will be inherited from its parent value.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
I think you need set your html and body tag with height:100% so you can use percent like you want
html, body {height:100%}
DEMO
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
