I have found a solution on stack overflow(This is the solution):
footer
{
position:fixed;
bottom:0;
width:100%;
height:auto;
margin-top: 30px;
background-color: green;
}
The issue is this: It does keep the content at the bottom of the page, the issue is that it sits behind the content. The problem I am trying to say is this: I want the footer to stay at the bottom of the page and if more content gets added, I want the footer content to stay at the bottom of the page, I am having an issue resolving this. I did try to make the bottom value 1 and -1 but the scroll bar was not apparent so that was not the solution to the whole ordeal.
The html, body, and wrapper CSS I got from a youtube video here: Footer Stick to Bottom video that didn't properly work Many thanks!
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
background-color: black;
}
#wrapper {
min-height: 100%;
position: relative;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: auto;
margin-top: 30px;
background-color: green;
}
#homepage {
background-image: url(images/home_image.jpeg);
background-size: cover;
}
/* MEDIA QUERIES */
/* Smaller/Older Smartphones */
@media screen and (max-width: 360px) {}
/* Regular Smartphones */
@media screen and (min-width: 360px) and (max-width: 480px) {}
/*#################################
###################################
###################################
#################################*/
/* BIGGER PHONES */
@media screen and (min-width: 480px) and (max-width: 768px) {}
/*#################################
###################################
###################################
#################################*/
/* Regular Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {}
}
/*#################################
###################################
###################################
#################################*/
/* Large Tablets/Small Computers */
@media screen and (min-width: 1024px) and (max-width: 1366px) {}
/*#################################
###################################
###################################
#################################*/
/* Large Tablets/Small Computers */
@media screen and (min-width: 1366px) {
/* HOMEPAGE */
.footer-contain h1 {
margin: 20px 25% 0px;
color: black;
text-align: center;
font-size: 60px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<!-- START OF HEAD -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Nerdo Development Homepage</title>
<!-- CSS STYLES -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="specificdevicestyles.css">
</head>
<!-- END OF HEAD -->
<!-- START OF BODY -->
<body id="homepage">
<div id="wrapper">
<!-- NAVIGATION BAR -->
<section id="navigation">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Nerdo Development</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navB" aria-controls="navB" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navB">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<div class="dropdown show">
<a class="btn nav-link dropdown-toggle text-left" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Examples
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="webdesignexamples.html">Web Designs</a>
<a class="dropdown-item" href="businesscardsexamples.html">Business Cards</a>
<a class="dropdown-item" href="clients.html">Clients We Have Worked With</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pricing.html">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</nav>
</section>
<!-- END OF NAVIGATION BAR -->
<!-- START OF HOMEPAGE -->
<section>
<div class="container footer-contain">
<div class="row text-center">
<div class="col-md">
<h1 class="homepageQuote">We <strong>specialize</strong> in creating <strong>appealing</strong> websites for <strong>small</strong> businesses across the world for an <strong>inexpensive cost</strong></h1>
</div>
</div>
<br>
<div class="row text-center button-special">
<div class="col-md">
<button type="button" class="btn btn-lg"><a href="about.html">About our Team</a></button>
</div>
<div class="col-md button-margin">
<button type="button" class="btn btn-lg"><a href="services.html">Our Services</a></button>
</div>
</div>
</div>
</section>
<!-- END OF HOMEPAGE -->
<!-- START OF FOOTER -->
<footer class="footer text-center">
<div class="container footer-main-alpha">
<div class="row footer-settings">
<div class="col-md">
<h5>Our Mission To You</h5>
<h5>Our objective is to create the software or website you want. We give our 100% effort into completing and satisying your needs and wants.</h5>
</div>
<div class="col-md">
<blockquote class="blockquote">
<h4>"Design is not just what it looks like and feels like. Design is how it works."<span class="blockquote-footer">Steve Jobs</span></h4>
</blockquote>
</div>
<div class="col-md">
<h1>Navigate Around</h1>
<h6><a href="index.html">Home</a> | <a href="about.html">About Us</a></h6>
<h6><a href="webdesignexamples.html">Examples</a> | <a href="services.html">Our Services</a></h6>
<h6><a href="pricing.html">Our Pricing</a> | <a href="contact.html">Contact Us</a></h6>
</div>
</div>
</div>
<!-- SOCIAL MEDIA -->
<div class="container footer-social">
<div class="row footer-settings">
<div class="col-md following">
<h5><span>Follow us on Social Media!</span></h5>
<ul class="list-inline">
<li class="list-inline-item">
<a href="https://twitter.com/NerdoDevelopme1" target="_blank"><img src="images/icon_twitter.png"></a>
</li>
<li class="list-inline-item">
<a href="https://www.facebook.com/nerdodevelopment/" target="_blank"><img src="images/icon_facebook.png"></a>
</li>
<li class="list-inline-item">
<a href="https://www.instagram.com/nerdodevelopment/?hl=en" target="_blank"><img src="images/icon_instagram.png"></a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/nerdo-development-2533b1166/" target="_blank"><img src="images/icon_linkedin.png"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="container footer-copyright footer-settings">
<h6>Nerdo Development Copyright © 2018; All Rights Reserved</h6>
</div>
</footer>
<!-- END OF FOOTER -->
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</html>You have:
position: fixed;
in your CSS.
In shorthand, what this means is that the element is positioned relatively and fixed to the screen view of the page, so the element will never be off the viewport window of the page. This will most notably be an issue with pages longer than the screen, as the element will never, ever scroll.
What you are actually needing is position:absolute; whereby the element is position in a fixed way relative to its parent element.
As stated on the MDN Manual:
Absolute:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.
Therefore you will need to set a valid z-index value for the absolutely positioned element to ensure it stays above and not below other content on the page.
Personally I also have a sneaking feeling that the Parent element of the Absolutely positioned element (your footer) should also be set as non-static relatively positioned.
Therefore I would imagine your footer css should be something like:
footer {
position: absolute;
z-index: 1000 /* Always on top */
bottom: 0;
width: 100%;
height: auto;
margin-top: 30px;
background-color: green;
}