How can I restrict a page to the height of the viewport? I want to control the overflow-y on child elements, but it seems like I cannot limit the height--I can only set a max-height in pixels or a percentage. I believe I need to confine the height of certain elements to the remaining portion (not a percentage) of the viewport height, but I am unable to find a solution for that.
(I am utilizing bootstrap, however, I suspect the solution does not revolve around bootstrap.)
I thought about using flex with flex-grow, but even that doesn't limit the height. What am I overlooking?
<div class="container d-flex flex-column ">
<div>
My full-width page title goes here
</div>
<div class="row flex-grow-1">
<div class="col col-4">
potentially long content here
</div>
<div class="col-8">
main content
</div>
</div>
</div>
Using CSS
body {
height: 100vh;
}
.row {
margin-top: 20px;
}
.col {
border: solid 1px black;
padding: 10px;
overflow-y: scroll;
}
(Fiddle)
Current: Page extends beyond viewport height; inner scroll bar is ineffective; viewport scroll bar present
Desired: Page utilizes entire viewport height and no more; functional inner scroll bar; no viewport scroll bar