To solve the issue at hand, it is recommended to structure your webpage in the following manner:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
Utilize the following CSS styles:
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
header, footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
This method can be implemented with or without Bootstrap. However, for non-Bootstrap projects, ensure to add
* { box-sizing: border-box; }
(although this is already integrated in Bootstrap).
Here's a demonstration using Bootstrap v4:
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
header, footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
footer {
background-color: #eee;
}
<!doctype html>
<html lang="en>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main role="main">
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Elementum eu facilisis sed odio morbi quis commodo odio. Tempus egestas sed sed risus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Eu ultrices vitae auctor eu augue ut. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. In pellentesque massa placerat duis. Bibendum enim facilisis gravida neque convallis.
...
... (the text continues)
...
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">I'm your footer. Always at the bottom of the screen. When the page content is too tall, I get pushed down. I also adjust my height according to my contents.</span>
</div>
</footer>
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>