I am trying to make a footer that stays at the same fixed location at the very bottom of the page. I can not get it to lay flat at the very bottom it keeps displaying about 1/10th of the page up. I am also having difficulty getting it to react to browser size changes. I have included a blank div that should expand to keep the footer matching to the browser size, but I currently can not get this to work properly. Everything else on the page reacts correctly with resizing. I have included my CSS and HTML in these two paste bins, I have also included the images in the Imgur link. https://i.sstatic.net/qOPep.jpg HTML: http://pastebin.com/raw/BCpvspZQ CSS: http://pastebin.com/raw/2Se0A5ER
.kale-grain-bowls, .salads,
.burgers-sandwiches, .sides,
.smoothies-milkshake, .kids-real-meals{
background-position: 0% 0%;
height: 100px;
float: left;
margin:2.5px;
position: relative;
}
.kale-grain-bowls{
background-image: url('../images-source/templateFoodMainPage.png');
}
.salads{
background-image: url('../images-source/templateFoodMainPage.png');
bottom: 72px;
}
.burgers-sandwiches{
background-image: url('../images-source/templateFoodMainPage.png');
bottom: 144px;
}
.sides{
background-image: url('../images-source/templateFoodMainPage.png');
bottom: 216px;
}
.smoothies-milkshake{
background-image: url('../images-source/templateFoodMainPage.png');
bottom: 288px;
}
.kids-real-meals{
background-image: url('../images-source/templateFoodMainPage.png');
bottom: 360px;
}
.page{
height: 100%;
width: 100%;
text-align: center;
}
.video, .front-promo-1,
.front-promo-2, .events,
.family-foundation, .partners,
.fundraisers, .cousins, .geniuses,
.greats, .vision{
margin: 2.5px;
float: left;
position: relative;
}
.video{
height: 300px;
background-image: url('../images-source/videoImage.png');
bottom: 360px;
}
.front-promo-1{
height: 147.5px;
background-image: url('../images-source/templateMainpage.png');
bottom: 360px;
}
.front-promo-2{
height: 147.5px;
background-image: url('../images-source/templateMainpage.png');
bottom: 360px;
}
.events{
height: 300px;
background-image: url('../images-source/communitySlideshow.png');
}
.family-foundation{
height: 149px;
background-image: url('../images-source/Familyfoundation.png');
bottom: 75px;
}
.partners{
height: 149px;
background-image: url('../images-source/Familyfoundation.png');
bottom: 75px;
}
.fundraisers{
height: 149px;
background-image: url('../images-source/Familyfoundation.png');
bottom: 125px;
}
.cousins{
height: 149px;
background-image: url('../images-source/communitybottom.png');
bottom: 72px;
}
.geniuses{
height: 149px;
background-image: url('../images-source/communitybottom.png');
bottom: 72px;
}
.greats{
height: 149px;
background-image: url('../images-source/communitybottom.png');
bottom: 72px;
}
.vision{
height: 300px;
background-image: url('../images-source/about.png');
}
.location-data{
float:left;
width:50%;
height:100%;
}
.location-image{
float: left;
background-image: url('../images-source/communitybottom.png');
height: 300px
}
.location-text{
float: left;
bottom: 1px;
}
.foodblock{
float: left;
margin: 10px;
height: auto;
bottom: 50px;
}
.textblock{
float: left;
margin: 20px;
text-align: center;
}
.foodcontent{
bottom: 500px;
}
.menu-type{
text-align: center;
font-weight: bold;
font-family: "Times New Roman", Georgia, Serif;
font-size: 2.5em;
}
.spicy-avocado-lime, .toasted-almond-ginger,
.power-bowl, .farmstand-tomato-basil,
.chicken-caesar, .harvest-kale,
.southwestern-chicken, .watermelon-feta,
.summer-berry-salad, .cousin-oliver,
.west-side, .el-guapo, .adopted-luke,
.buffalo, .elizel, .real-fries,
.sweet-potato-fries, .crisp-veggies,
.side-salad, .seasonal-special,
.kale-crush, .acai-berry,
.strawberry-banana, .lucy-blue,
.seasonal-special-smoothie,
.vanilla, .chocolate,
.kids-burger, .grilled-cheese,
.hot-dog, .kids-smoothie, .local-apple-bacon-bowl{
height: 200px;
float: left;
width: 100%;
}
.spicy-avocado-lime{
background-image: url('../images-source/communitybottom.png');
}
.toasted-almond-ginger{
background-image: url('../images-source/communitybottom.png');
}
.local-apple-bacon-bowl{
background-image: url('../images-source/communitybottom.png');
}
.power-bowl{
background-image: url('../images-source/communitybottom.png');
}
.farmstand-tomato-basil{
background-image: url('../images-source/communitybottom.png');
}
.chicken-caesar{
background-image: url('../images-source/communitybottom.png');
}
.harvest-kale{
background-image: url('../images-source/communitybottom.png');
}
.southwestern-chicken{
background-image: url('../images-source/communitybottom.png');
}
.watermelon-feta{
background-image: url('../images-source/communitybottom.png');
}
.summer-berry-salad{
background-image: url('../images-source/communitybottom.png');
}
.salad-subtext{
width: 100%;
text-align: center;
}
.cousin-oliver{
background-image: url('../images-source/communitybottom.png');
}
.west-side{
background-image: url('../images-source/communitybottom.png');
}
.el-guapo{
background-image: url('../images-source/communitybottom.png');
}
.adopted-luke{
background-image: url('../images-source/communitybottom.png');
}
.buffalo{
background-image: url('../images-source/communitybottom.png');
}
.elizel{
background-image: url('../images-source/communitybottom.png');
}
.burger-top-text{
text-align: center;
width: 100%;
}
.burger-bottom-text{
text-align: center;
width: 100%;
}
.real-fries{
background-image: url('../images-source/communitybottom.png');
}
.sweet-potato-fries{
background-image: url('../images-source/communitybottom.png');
}
.crisp-veggies{
background-image: url('../images-source/communitybottom.png');
}
.side-salad{
background-image: url('../images-source/communitybottom.png');
}
.seasonal-special{
background-image: url('../images-source/communitybottom.png');
}
.kale-crush{
background-image: url('../images-source/communitybottom.png');
}
.acai-berry{
background-image: url('../images-source/communitybottom.png');
}
.strawberry-banana{
background-image: url('../images-source/communitybottom.png');
}
.lucy-blue{
background-image: url('../images-source/communitybottom.png');
}
.seasonal-special-smoothie{
background-image: url('../images-source/communitybottom.png');
}
.vanilla{
background-image: url('../images-source/communitybottom.png');
}
.chocolate{
background-image: url('../images-source/communitybottom.png');
}
.smoothies-top-text{
width: 100%;
}
.milkshakes-text{
width: 100%;
text-align: center;
}
.kids-burger{
background-image: url('../images-source/communitybottom.png');
}
.grilled-cheese{
background-image: url('../images-source/communitybottom.png');
}
.hot-dog{
background-image: url('../images-source/communitybottom.png');
}
.kids-smoothie{
background-image: url('../images-source/communitybottom.png');
}
.kids-real-meal-text{
width: 100%;
}
.clear-div{
clear: both;
}
.bgood-footer{
width:100%;
height: 20%;
position: fixed;
bottom: 0;
margin: 0 auto;
}
.mobile-app, .talk,
.careers, .press,
.blank, .fb, .yt
.tw, .ig, .orderng-loc{
float: left;
background-repeat: no-repeat;
}
.mobile-app{
background-image: url('../images-source/mobile-app-button.png');
width: 10%;
}
.talk{
background-image: url('../images-source/talk-to-us.png');
width: 10%;
}
.careers{
background-image: url('../images-source/careers.png');
width: 10%;
}
.press{
background-image: url('../images-source/press.png');
width: 10%;
}
.blank{
background-image: url('../images-source/blank.png');
width: 10%;
}
.fb{
background-image: url('../images-source/fb.png');
width: 5%;
}
.yt{
background-image: url('../images-source/yt.png');
width: 5%;
}
.tw{
background-image: url('../images-source/tw.png');
width: 5%;
}
.ig{
background-image: url('../images-source/ig.png');
width: 5%;
}
.ordering-loc{
background-image: url('../images-source/ordering-loc.png');
width: 10%;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
img.footer-img{
width:50px;
}
img.mobile-app-img{
width: 150px;
height: 100%;
}
img.talk-to-us-img{
width: 150px;
height: 100%;
}
img.careers-img{
width: 100px;
height: 100%;
}
img.press-img{
width: 100px;
height: 100%;
}
img.ordering-loc-img{
width: 190px;
height: 100%;
}
ul.clearfix{
list-style:none;
margin:2px;
padding:2px 2px;
width:100%;
float:left;
}
li.foot{
float:left;
height: 45px;
}
li.left {
float:left;
}
li.mid{
float:left;
}
li.right{
float:left;
}
/*for mobile phones: */
[class*="col-"]{
width:100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8%;}
.col-m-2 {width: 16%;}
.col-m-2-5 {width: 21.55%;}
.col-m-3 {width: 28%;}
.col-m-4 {width: 32.5%;}
.col-m-5 {width: 40%;}
.col-m-6 {width: 48%;}
.col-m-7 {width: 56%;}
.col-m-8 {width: 65.7%;}
.col-m-9 {width: 72%;}
.col-m-10 {width: 80%;}
.col-m-11 {width: 88%;}
.col-m-12 {width: 96%;}
/*footer data: */
.foot-m-0{width:0%;}
}
@media only screen and (min-width: 768px){
/*for mobile desktop: */
.col-1 {width: 8%;}
.col-2-5 {width: 21.55%;}
.col-2 {width: 16%;}
.col-3 {width: 28%;}
.col-4 {width: 32.5%;}
.col-5 {width: 40%;}
.col-6 {width: 48%;}
.col-7 {width: 56%;}
.col-8 {width: 65.7%;}
.col-9 {width: 72%;}
.col-10 {width: 80%;}
.col-11 {width: 88%;}
.col-12 {width: 96%;}
/*footer data: */
.foot-m-0{width:0%;}
}<div class="page">
<a href="/menu/kale-grain-bowls"><div class="col-m-2 col-2 kale-grain-bowls">Kale & Grain Bowls</div></a>
<a href="/menu/salads"><div class="col-m-2 col-2 salads">Salads</div></a>
<a href="/menu/burgers-sandwiches"><div class="col-m-2 col-2 burgers-sandwiches">Burgers & Sandwiches</div></a>
<a href="/menu/sides"><div class="col-m-2 col-2 sides">Sides</div></a>
<a href="/menu/smoothies-shakes"><div class="col-m-2 col-2 smoothies-milkshake">Smoothies & Milkshakes</div></a>
<a href="/menu/kids-real-meals"><div class="col-m-2 col-2 kids-real-meals">Kid's Real Meals</div></a>
<div class="col-m-8 col-8 video">Video</div>
<a href="/promo/temp1"><div class="col-m-4 col-4 front-promo-1">Promo one</div></a>
<a href="/promo/temp2"><div class="col-m-4 col-4 front-promo-2">Promo two</div></a>
<div class="bgood-footer clearfix">
<ul class= clearfix>
<li class="left foot"><a href="/mobile-app"><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/mobile-app-button.png" class ="mobile-app-img"></a></li>
<li class="left foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/talk-to-us.png" class ="talk-to-us-img"></a></li>
<li class="left foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/careers.png" class ="careers-img"></a></li>
<li class="left foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/press.png" class ="press-img"></a></li>
<li class = "mid foot foot-m-0"></li>
<li class="foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/fb.png" class ="footer-img"></a></li>
<li class="foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/yt.png" class ="footer-img"></a></li>
<li class="foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/tw.png" class ="footer-img"></a></li>
<li class="foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/ig.png" class ="footer-img"></a></li>
<li class="right foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/ordering-loc.png" class ="ordering-loc-img"></a></li>
</ul>
</div>
</div>If I'm understanding the question correctly and you have a fixed height footer then you can use a min-height on your main to push it to the bottom of the page using calc().
So for example you have a HTML layout like:
<body>
<main><!-- Some Content --></main>
<footer><!-- Footer Content --></footer>
<body>
Then your css would be something like:
.footer {
height: 200px;
}
.main {
min-height: calc(100vh - 200px);
}
As far as I'm aware calc() is a widely supported function on modern browsers both mobile and desktop. The viewport height unit vh is also fairly widely supported.
You'd have to recalculate for various media queries to make it truly responsive.
Alternatively, if you don't know the footer height you can calculate it on the fly with jQuery(or vanilla js if you're familiar with it) to add a minimum height:
jQuery(document).ready(function(){
var height = window.innerHeight;
var footerHeight = $('footer').outerHeight();
$('main').css('min-height', (height - footerHeight) + 'px');
});
I'm sure some of the experts on SO will have more answers for you but that's my take on it.