Menu
I'm using Bootstrap 3 and I'm trying to make a scrollable content DIV. I have a grid with a left side navigation and a top bar and in the middle I have the content that should be scrollable.
It works when I use a fixed height on the content div...but I want to use 100% instead.
<div class="col-lg-12 col-md-12 col-sm-12" style="height:100%;overflow-y:auto;">
some content...
</div>
CSS:
html,body
{
height:100%;
overflow:hidden;
}
How could I get this to work with height:100%;
Thanks!
247
It can be done by the following approach: Approach: Making all the div element in next line using position: absolute; property (arrange all div column-wise). Adding the scroll bar to all the div element using overflow-y: scroll; property.
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.
To easily add scrollspy behavior to your topbar navigation, add data-bs-spy="scroll" to the element you want to spy on (most typically this would be the <body> ). Then add the data-bs-target attribute with the ID or class of the parent element of any Bootstrap .
All you have to do is force the height of the containing div (here a row) to the height of the viewport. Then you make all the columns 100% height and set the overflow-y to scroll. That way any overflow on the column will be scrollable, but they will still take up the whole page.
You can add pre-scrollable class for the div you want to scroll.
If you search the .css there is a max-height but you cant edit. So you have sure it will maximize the page in the window for that max value.
Hope it helps, i used the same for a one-page with scrollable divs.
92
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
