Menu
I have the following code:
div.leftnav {
overflow: auto ;
height: 50% ;
}
That, when I set a big div of this class, does not work (it doesn't show the scrollbar nor resize it to 50%, however it works perfectly if instead if I use
height: 400px ;
Or some other "absolute" value.
819
Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default 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.
If you want tbody to show a scrollbar, set its display: block; . Set display: table; for the tr so that it keeps the behavior of a table. To evenly spread the cells, use table-layout: fixed; . Anyhow, to set a scrollbar, a display reset is needed to get rid of the table-layout (which will never show scrollbar).
height will only work if the parent element has a height instruction as well.
So say 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%;
}
You need to have height instructions all the way though. If there is a height instruction missing on one of the parent elements, then the 100% won't mean anything to the div. If you can't access all the elements down the tree, then 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;
}
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
