Make content fill page vertically except for navbar : webdev

I know this question has been asked many times before. I’ve tried everything I’ve found and I’m at my wit’s end. Using Bootstrap 4.4.1 and SCSS, if it’s relevant.

I’m trying to achieve a layout like this:

So, there is a navbar at the top, and then the rest of the viewport is filled with #content (then subdivided into a #sidebar and a main area). #content should take up the whole viewport, except the navbar.

Here’s the HTML:

<body>
    <nav class="navbar navbar-dark bg-dark">
	<!-- navbar contents -->
    </nav>
    <div class="container-fluid">
        <div class="row" id="content">
            <div class="col-3" id="sidebar">
                <!-- sidebar contents -->
	    </div>
	    <div class="col">
	        <!-- main area contents -->
	    </div>
	</div>
    </div>
</body>

I’ve tried using various combinations of height: 100%, min-height: 100vh, box-sizing: border-box, and more, as well as the Bootstrap classes such as .flex-fill. Either nothing happens, or it extends to the height of the page but doesn’t take into account the navbar, causing it to overflow the viewport.

If anyone could help, I’d appreciate it greatly. Thanks 🙂

Source link