I'm looking to create a layout with a fixed header and footer, where the content in between always takes up the full height. I decided to use a three-row flexbox layout.
However, I'm encountering an issue with the left content column not scrolling (overflow-y:auto) when the content gets too long. It seems that setting it to 100% height isn't working as expected. Is there a way to achieve this without having to calculate the real height using something like 100vh minus the combined heights of the header and footer?
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<style>
div[class^="col"] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(112.520718, 44.062154, 249.437846, 0.1);
border: 1px solid rgba(112.520718, 44.062154, 249.437846, 0.25);
}
.content {
flex: 1;
}
.inner-content {
overflow-y: auto;
background-color: red;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<header>
<div class="container">
<nav class="navbar sticky-top">
<a class="navbar-brand" href="#">Fixed navbar</a>
</nav>
</div>
</header>
<main class="content">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col h-100 p-0">
<div class="h-100 inner-content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet...
</div>
</div>
<div class="col">col</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>