I am currently working on implementing a new bootstrap "frame" template for my website's layout. While setting up the navbar was relatively easy, I'm encountering some challenges with the footer.
The requirements for the footer are as follows:
- It needs to be sticky
- It should consist of 2 rows:
- A thick gray row with 4 columns of responsive content
- A thin black row that extends to the very bottom of the browser window
Here is what I have implemented so far:
sticky-footer.css:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 550px;
}
.footer {
background: black;
position: absolute;
bottom: 0;
width: 100%;
}
// CSS code continued...
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
// HTML code continued...
</head>
<body>
<header>
<div class="container">
// Header content
</div>
</header>
<div class="container">
<div class="mt-1">
// Main content
</div>
</div>
<footer class="footer">
<div id="contentFooter">
<div class="container">
// Footer content
</div>
</div>
<div class="container" id="copyrightFooter">
<div class="row">
// Copyright details
</div>
</div>
</footer>
</body>
</html>
While this setup almost works as intended, there are still 3 issues remaining (refer to screenshot):
- There is a white space below the black part of the footer when the browser window width is narrow. The black section should extend to the absolute bottom of the viewport.
- The "ACME Inc." text in the black footer should be centered once responsiveness kicks in.
- The footer height is fixed at 550px in the body styling. Is there a way to make this dynamic so that manual adjustments are not needed?
Unfortunately, I couldn't provide a runnable code snippet due to limitations in the Stack Overflow editor. You can view and test the code on JSFiddle here.