I'm looking to create a fixed footer at the bottom of my page, where the contents adjust based on the view height.
Recommended: Check out this CodePen for an example with a well-contained layout. You'll notice that even as the menu items increase, the footer remains within its designated space.
Avoid: This other CodePen has content overflowing outside the viewport, requiring users to scroll down to access the footer.
Any suggestions for CSS modifications to fix the issues in the second CodePen?
As StackOverflow requires code snippets, here are the HTML and CSS codes for each CodePen:
Working HTML:
<div class="container">
<div class="nav">
<h1>Top Nav Bar</h1>
</div>
<div class="sidebar">
<h2>Menu</h2>
<ul>
// List of menu items...
</ul>
</div>
<div class="main">
<p>Hello World</p>
</div>
<div class="footer">This is the footer</div>
</div>
Correct CSS:
body,html{ margin: 0; padding: 0; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container{ display: grid; height: 100vh; border: 3px solid red;
grid-template-areas: "nav nav"
"sidebar main"
"footer footer";
grid-template-rows: auto
1fr
auto;
grid-template-columns: 200px 1fr; }
.nav{ grid-area: nav; border-bottom: 1px solid #AAA; }
.sidebar{ grid-area: sidebar; border-right: 1px solid #AAA; max-height: 100%; overflow-y: scroll; }
.footer{ grid-area: footer; text-align: center; background-color: lightgreen; }
Problematic HTML:
<div class="container">
<div class="nav">
<h1>Top Nav Bar</h1>
</div>
<div class="sidebar">
<h2>Menu</h2>
<ul>
// Incomplete list of items...
</ul>
</div>
<div class="main">
// Large amount of content without proper structure...
</div>
<div class="footer">This is the footer</div>
</div>
Incorrect CSS:
body,html{ margin: 0; padding: 0; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container{ display: grid; height: 100vh; border: 3px solid red;
grid-template-areas: "nav nav"
"sidebar main"
"footer footer";
grid-template-rows: auto
1fr
auto;
grid-template-columns: 200px 1fr; }
.nav{ grid-area: nav; border-bottom: 1px solid #AAA; }
.sidebar{ grid-area: sidebar; border-right: 1px solid #AAA; }
.footer{ grid-area: footer; text-align: center; background-color: lightgreen; }
.main{ grid-area: main; display: grid;
grid-template-areas: "main-main";
grid-template-rows: 1fr
auto }
.main-main{ grid-area: main-main; display: grid; border-top: 1px solid #AAA;
grid-template-areas: "area-left area-right";
grid-template-columns: 200px 1fr; max-height: 100%; overflow-y: auto; }
.area-left{ grid-area: area-left; // Issues with scrolling...
.area-right{ grid-area: area-right; // Problems with content overflow...