I am having trouble trying to create a footer that will stay at the bottom of th
ID: 3741037 • Letter: I
Question
I am having trouble trying to create a footer that will stay at the bottom of the browser window if there is not enough content to push it down further. Not a fixed footer! I dont want the footer to scroll with my content. :) I have looked at suggestions online, however the solutions either make my footer have a full windows space above it even if there is content or it stays at the bottom of my page but overlaps the content. I am guessing there is something in my code that is conflicting with the solutions online, but I have no idea how to fix it to make it work. Any help would be appreciated :)
I have pasted the HTML & CSS below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<title>Login To Website</title>
</head>
<body>
<header>
<div class="headerwrapper">
<div class="wrapper">
<ul class="nav">
<li><a class="nav-link-left" href="">Home</a></li>
<li class="right-nav"><a class="nav-link-right" href="">Log In</a></li>
<li class="right-nav"><a class="nav-link-right" href="">Register</a></li>
</ul>
</div>
</div>
</header>
<content>
<div class="wrapper">
<div class="row">
<div class="col-6">
<form id="form-register">
<h1>Login to Brisbane Wifi</h1>
<h5>Login to leave reviews for your favourite Brisbane hotspots.</h5>
<input type="text" name="username" class="formBox" placeholder="Username" required><br>
<input type="password" name="typePassword" id="firstpassword" class="formBox" placeholder="Password" required />
<br><br><button type="submit" value="Submit" class="signupButton" >Sign In</button><br>
</form>
<div class="login-border">
<p class="review-details rating-center">New User?</p>
<button type="submit" value="Submit" class="signupButton smaller-button" >Register</button><br>
</div>
</div>
<div class="col-6">
<img src="images/reciever.png" alt="reciever" class="recieve-image">
</div>
</div>
</div>
</content>
<footer>
<div class="wrapper">
<div class="row">
<img src="images/wifiIcon.png" alt="Wifi Icon" class="footer-icon" >
</div>
<div class="row">
<div class="col-4">
<a class="footer-link-left" href="">Home</a>
</div>
<div class="col-4">
<a class="footer-link-center" href="">Sign Up</a>
</div>
<div class="col-4">
<a class="footer-link-right" href="">Log In</a>
</div>
</div>
</div>
</div>
<div class="footer-bottom-bar">
<div class="wrapper">
<p class="footer-text">CAB230 - WEBCOMPUTING</p>
</div>
</div>
</footer>
</div>
</body>
</html>
AND THE CSS IS...
* {
box-sizing: border-box;
}
html, body {
padding:0;
margin:0;
}
body {
background-color: #FFFFFF;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
min-width: 280px;
box-sizing: border-box;
}
h1 {
font-size: 20px;
font-weight: 700;
color: #72a3de;
text-align: center;
}
h2 {
font-size: 18px;
font-weight: 700;
color: #72a3de;
}
h3 {
font-size: 16px;
color: #3d5676;
}
h4 {
font-size: 14px;
font-weight: 700;
color: #000000;
}
h5 {
font-size: 12px;
color: #3d5676;
text-align: center;
}
h6 {
font-size: 12px;
font-weight: 700;
color: #3d5676;
text-decoration: underline;
}
p {
font-size: 14px;
color: #000000;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.row::after {
content: "";
clear: both;
display: table;
}
header {
width:100%;
position: relative;
}
.headerwrapper {
background-color: #72a3de;
}
.wrapper {
width:80%;
margin-left: auto;
margin-right: auto;
}
.nav-home {
list-style-type: none;
margin: 0px;
padding: 30px;
}
.nav-home li{
display: inline;
}
.nav-home li.right-nav-home{
float:right;
}
.nav-home li a{
display: inline;
}
.nav-home a.nav-link-home-right {
border-style: solid;
border-width:2px;
border-color: #ffffff;
border-radius: 3px;
}
.nav-home a:hover.nav-link-home-right {
background-color: #ffffff;
color: #000000;
}
.nav-home a:hover.nav-link-home-left {
border-bottom-style: solid;
border-width: 4px;
border-color: #ffffff;
}
.nav {
list-style-type: none;
margin: auto;
padding: 30px;
background-color: #72a3de;
}
.nav li{
display: inline;
}
.nav li a{
display: inline;
}
[class*="nav-link-"] {
height: 40px;
margin-left: 10px;
margin-right: 10px;
padding-top:8px;
padding-left: 20px;
padding-right: 20px;
padding-bottom:8px;
text-align: center;
font-size: 11pt;
font-weight: bold;
color: white;
text-decoration:none;
}
.nav a.nav-link-right {
border-style: solid;
border-width:2px;
border-color: #5b83b2;
border-radius: 3px;
background-color: #5b83b2;
}
.nav a:hover.nav-link-right {
background-color: #4b6b92;
border-color: #4b6b92;
}
.nav li.right-nav {
float:right;
}
.nav a:hover.nav-link-left {
border-bottom-style: solid;
border-width: 4px;
border-color: #4b6b92;
}
#form-register {
width: 100%;
display: block;
text-align: center;
}
[class*="formBox"] {
border-radius: 5px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
padding-left: 8px;
margin:1%;
line-height: 2em;
border: 1px solid #cccccc;
}
.formBox {
width:92%;
}
.formBoxes {
width: 46%;
margin:auto;
}
.formSelect {
width:92%;
border-radius: 5px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid #cccccc;
margin:1%;
color: #666666;
}
#genderOption {
color: #666666;
margin:1%;
}
#optionalGender {
color: #666666;
font-size: 12px;
margin:1%;
}
.radioLabels {
color: #666666;
font-size: 12px;
}
.updates {
color: #666666;
padding-left: 5px;
font-size: 12px;
}
.signupButton {
width:92%;
border-radius: 5px;
font-size: 16px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
margin:1%;
color: #ffffff;
background: linear-gradient(to bottom right, #5b83b2, #3d5676);
font-weight: 700;
height: 50px;
border-color: transparent;
box-shadow: 2px 2px 4px #cccccc;
margin-bottom: 30px;
}
.signupButton:hover {
background: linear-gradient(to bottom right, #3d5676, #2b3e54);
}
.commsImage {
height: 60%;
width: 60%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 145px;
margin-bottom: 145px;
}
footer {
background-color: #72a3de;
padding-top: 20px;
width:100%;
bottom: 0;
}
.footer-icon {
width: 5%;
height: 5%;
margin-left: auto;
margin-right: auto;
display: block;
}
.footer-link-left {
text-align: right;
}
.footer-link-center {
text-align: center;
}
.footer-link-right {
text-align: left;
}
[class*="footer-link-"] {
text-decoration:none;
display: block;
color: white;
font-weight: 700;
font-size: 15px;
}
[class*="footer-link-"]:hover {
text-decoration:underline;
color: #3d5676;
}
.footer-bottom-bar {
background-color: #3d5676;
bottom: 0;
left:0;
}
.footer-text {
padding: 5px;
font-size: 12px;
text-align: center;
color: white;
}
.result-numbers {
font-size: 12px;
font-weight: 700;
}
.sort-right {
text-align: right;
}
.sort-text {
font-size: 12px;
font-weight: 700;
display: inline-block;
}
#sort-by {
width: 40%;
display: inline-block;
}
.results-box {
background-color: #f2f2f2;
box-shadow: 1px 2px 4px #888888;
margin-top: 20px;
margin-bottom: 20px;
}
.excerpt {
font-size: 12px;
font-style: italic;
font-weight: 100;
color: #595959;
}
.excerpt-title {
font-size: 12px;
font-weight: 700;
}
.result-address {
font-weight: 100;
}
.results-rating {
text-align: center;
margin-top: 21px;
}
.results-margin {
margin-bottom: 10px;
}
.item-margins {
padding-top: 19px;
padding-bottom: 18px;
}
.results-border {
border-left: 1px solid #d9d9d9;
}
.center-map {
text-align:right;
}
.checked {
color: #FFD700;
}
.rating-center {
text-align: center;
}
.rating {
border: none;
display: inline-block;
}
.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 1.2em;
font-family: FontAwesome;
display: inline-block;
content: " 005";
}
.rating > label {
color: #000000;
float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
.review-button {
width: 98%;
font-size: 14px;
height: 35px;
margin-bottom: 6px;
}
.review-bottom-border {
border-bottom: 1px solid #d9d9d9;
}
.review-details {
font-size: 13px;
color: #808080;
font-style: italic;
font-weight: 100;
}
.login-border {
border-top: 1px solid #d9d9d9;
text-align: center;
margin-top: 30px;
margin-bottom: 40px;
padding-top: 20px;
}
.smaller-button {
width: 30%;
font-size: 14px;
height: 35px;
margin-bottom: 6px;
}
.recieve-image {
height: 50%;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 92px;
margin-bottom: 92px;
}
@media only screen and (max-width: 1024px) {
/* For tablets: */
[class*="col-"] {
width: 100%;
}
.commsImage {
display: none;
}
.recieve-image {
display: none;
}
[class*="footer-link-"] {
text-align: center;
}
.result-numbers {
text-align: center;
}
.sort-right{
text-align: center;
}
.results-border {
border-left: none;
border-top: 1px solid #d9d9d9;
}
.hide-map {
display:none;
}
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
.footer-icon {
width: 10%;
height: 10%;
}
.wrapper {
width: 90%;
}
}
@media only screen and (max-width: 321px) {
/* For mobile phones: Portrait*/
.footer-icon {
display: none;
}
.wrapper {
width: 100%;
}
}
Explanation / Answer
Solution : Comment for any doubt
Two modifications:
1. Add padding to the body at bottom. Adjust padding according to the height of your footer.
padding-bottom : 160px;
2. Make footer fixed.
position : fixed;
Modified CSS:
* {
box-sizing: border-box;
}
html, body {
padding:0;
margin:0;
}
body {
background-color: #FFFFFF;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
min-width: 280px;
box-sizing: border-box;
margin-bottom: 160px;
}
h1 {
font-size: 20px;
font-weight: 700;
color: #72a3de;
text-align: center;
}
h2 {
font-size: 18px;
font-weight: 700;
color: #72a3de;
}
h3 {
font-size: 16px;
color: #3d5676;
}
h4 {
font-size: 14px;
font-weight: 700;
color: #000000;
}
h5 {
font-size: 12px;
color: #3d5676;
text-align: center;
}
h6 {
font-size: 12px;
font-weight: 700;
color: #3d5676;
text-decoration: underline;
}
p {
font-size: 14px;
color: #000000;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.row::after {
content: "";
clear: both;
display: table;
}
header {
width:100%;
position: relative;
}
.headerwrapper {
background-color: #72a3de;
}
.wrapper {
width:80%;
margin-left: auto;
margin-right: auto;
}
.nav-home {
list-style-type: none;
margin: 0px;
padding: 30px;
}
.nav-home li{
display: inline;
}
.nav-home li.right-nav-home{
float:right;
}
.nav-home li a{
display: inline;
}
.nav-home a.nav-link-home-right {
border-style: solid;
border-width:2px;
border-color: #ffffff;
border-radius: 3px;
}
.nav-home a:hover.nav-link-home-right {
background-color: #ffffff;
color: #000000;
}
.nav-home a:hover.nav-link-home-left {
border-bottom-style: solid;
border-width: 4px;
border-color: #ffffff;
}
.nav {
list-style-type: none;
margin: auto;
padding: 30px;
background-color: #72a3de;
}
.nav li{
display: inline;
}
.nav li a{
display: inline;
}
[class*="nav-link-"] {
height: 40px;
margin-left: 10px;
margin-right: 10px;
padding-top:8px;
padding-left: 20px;
padding-right: 20px;
padding-bottom:8px;
text-align: center;
font-size: 11pt;
font-weight: bold;
color: white;
text-decoration:none;
}
.nav a.nav-link-right {
border-style: solid;
border-width:2px;
border-color: #5b83b2;
border-radius: 3px;
background-color: #5b83b2;
}
.nav a:hover.nav-link-right {
background-color: #4b6b92;
border-color: #4b6b92;
}
.nav li.right-nav {
float:right;
}
.nav a:hover.nav-link-left {
border-bottom-style: solid;
border-width: 4px;
border-color: #4b6b92;
}
#form-register {
width: 100%;
display: block;
text-align: center;
}
[class*="formBox"] {
border-radius: 5px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
padding-left: 8px;
margin:1%;
line-height: 2em;
border: 1px solid #cccccc;
}
.formBox {
width:92%;
}
.formBoxes {
width: 46%;
margin:auto;
}
.formSelect {
width:92%;
border-radius: 5px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid #cccccc;
margin:1%;
color: #666666;
}
#genderOption {
color: #666666;
margin:1%;
}
#optionalGender {
color: #666666;
font-size: 12px;
margin:1%;
}
.radioLabels {
color: #666666;
font-size: 12px;
}
.updates {
color: #666666;
padding-left: 5px;
font-size: 12px;
}
.signupButton {
width:92%;
border-radius: 5px;
font-size: 16px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
margin:1%;
color: #ffffff;
background: linear-gradient(to bottom right, #5b83b2, #3d5676);
font-weight: 700;
height: 50px;
border-color: transparent;
box-shadow: 2px 2px 4px #cccccc;
margin-bottom: 30px;
}
.signupButton:hover {
background: linear-gradient(to bottom right, #3d5676, #2b3e54);
}
.commsImage {
height: 60%;
width: 60%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 145px;
margin-bottom: 145px;
}
footer {
background-color: #72a3de;
padding-top: 20px;
width:100%;
bottom: 0;
position : fixed;
}
.footer-icon {
width: 5%;
height: 5%;
margin-left: auto;
margin-right: auto;
display: block;
}
.footer-link-left {
text-align: right;
}
.footer-link-center {
text-align: center;
}
.footer-link-right {
text-align: left;
}
[class*="footer-link-"] {
text-decoration:none;
display: block;
color: white;
font-weight: 700;
font-size: 15px;
}
[class*="footer-link-"]:hover {
text-decoration:underline;
color: #3d5676;
}
.footer-bottom-bar {
background-color: #3d5676;
bottom: 0;
left:0;
}
.footer-text {
padding: 5px;
font-size: 12px;
text-align: center;
color: white;
}
.result-numbers {
font-size: 12px;
font-weight: 700;
}
.sort-right {
text-align: right;
}
.sort-text {
font-size: 12px;
font-weight: 700;
display: inline-block;
}
#sort-by {
width: 40%;
display: inline-block;
}
.results-box {
background-color: #f2f2f2;
box-shadow: 1px 2px 4px #888888;
margin-top: 20px;
margin-bottom: 20px;
}
.excerpt {
font-size: 12px;
font-style: italic;
font-weight: 100;
color: #595959;
}
.excerpt-title {
font-size: 12px;
font-weight: 700;
}
.result-address {
font-weight: 100;
}
.results-rating {
text-align: center;
margin-top: 21px;
}
.results-margin {
margin-bottom: 10px;
}
.item-margins {
padding-top: 19px;
padding-bottom: 18px;
}
.results-border {
border-left: 1px solid #d9d9d9;
}
.center-map {
text-align:right;
}
.checked {
color: #FFD700;
}
.rating-center {
text-align: center;
}
.rating {
border: none;
display: inline-block;
}
.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 1.2em;
font-family: FontAwesome;
display: inline-block;
content: " 005";
}
.rating > label {
color: #000000;
float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
.review-button {
width: 98%;
font-size: 14px;
height: 35px;
margin-bottom: 6px;
}
.review-bottom-border {
border-bottom: 1px solid #d9d9d9;
}
.review-details {
font-size: 13px;
color: #808080;
font-style: italic;
font-weight: 100;
}
.login-border {
border-top: 1px solid #d9d9d9;
text-align: center;
margin-top: 30px;
margin-bottom: 40px;
padding-top: 20px;
}
.smaller-button {
width: 30%;
font-size: 14px;
height: 35px;
margin-bottom: 6px;
}
.recieve-image {
height: 50%;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 92px;
margin-bottom: 92px;
}
@media only screen and (max-width: 1024px) {
/* For tablets: */
[class*="col-"] {
width: 100%;
}
.commsImage {
display: none;
}
.recieve-image {
display: none;
}
[class*="footer-link-"] {
text-align: center;
}
.result-numbers {
text-align: center;
}
.sort-right{
text-align: center;
}
.results-border {
border-left: none;
border-top: 1px solid #d9d9d9;
}
.hide-map {
display:none;
}
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
.footer-icon {
width: 10%;
height: 10%;
}
.wrapper {
width: 90%;
}
}
@media only screen and (max-width: 321px) {
/* For mobile phones: Portrait*/
.footer-icon {
display: none;
}
.wrapper {
width: 100%;
}
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.