I am currently working on configuring the footer placement on pages of my website that contain the main body content class ".interior-health-main". My goal is to have a sticky footer positioned at the very bottom of these pages in order to eliminate any white space that appears below the footer on large screens. After investing several hours into this task and experimenting with various solutions, I have opted to restrict the sticky footer to only the ".interior-health-main" pages rather than having it apply to the entire website. While I appreciate any assistance in customizing the footer exclusively for these pages, I am not interested in approaches that involve setting the entire body to position: relative as it negatively impacts the layout of my homepage.
For reference, you can observe the issue of white space below the footer on certain pages by visiting the following link: http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li><a href="/index.asp">Home</a></li>
<li><a href="/health-resources.asp">Health Resources</a></li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<a href="http://www.unl.edu/"><img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark"></a>
<a href="http://extension.unl.edu/"><img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo"></a>
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p><a href="#">Human Health</a></p>
<div class="line"></div>
<p><a href="/resources/pet-diseases.asp">Pet Diseases</a></p>
<div class="line"></div>
<p><a href="/resources/livestock-disease.asp">Livestock Diseases</a></p>
<div class="line"></div>
<p><a href="/resources/events.asp">Events</a></p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. <a href="/sitemap.asp">Site Map.</a></h6>
</div>
<div class="col-xs-3">
<a href="#"><img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon"></a>
<a href="https://www.facebook.com/nebraskaonehealthresources/"><img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon"></a>
</div>
</div>
</div>
</div>
Wondering about my css? Here it is:
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
@media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}