White space on bottom of Firefox and Chrome pages

Question

I asked a few days ago about removing white space that occurred in the right of my page when altering the size of the FF and Chrome browser windows. I was helped very quickly and fixed the issue (here is the post: Minimizing browser window in Firefox & Chrome adds white space to right of page ).

But the same tips don't seem to work for the white space on the bottom. Plus, it is always the same height no matter the size of the window, so I thought it was padding or margin , but it doesn't seem to be, as all the elements which would have any effect on the bottom of the page have padding and margin set to 0.

Any ideas? Relevant HTML and CSS below.

 html { margin:0; padding:0; height:100%; width:100%; position:relative; } body { margin:0; padding:0; height:100%; width:100%; position:absolute; bottom:0; top:0; left:0; right:0; } p { margin:0; padding:0; color:#1C1C1C; } img { margin:0; padding:0; } .maincontainer { position:relative; padding:0; margin:0; } .container { width:100%; min-height:100%; position:relative; margin:0; padding:0; } .container:after { content:""; display:block; } .logo { float:left; margin-left:20px; font-family:'Advent Pro', sans-serif; font-weight:100; color:#1C1C1C; } @media screen and (min-width:768px) { .logo { float:left; margin-left:5px; font-family:'Advent Pro', sans-serif; font-weight:100; color:#1C1C1C; } } .name { float:left; margin:5px 10px 0px 10px; font-size:37px; } .type { float:left; width:50px; margin-top:6px; padding:1px 0px 1px 10px; font-size:15px; border-left:1px solid #1C1C1C; } .nav { float:right; margin:0; padding:0; list-style:none; width:300px; } @media screen and (min-width:500px) { .nav { float:right; margin:0; padding:0; list-style:none; width:444px; } } .nav li { float:left; padding:16px 10px 13px 10px; font-family:'Advent Pro', sans-serif; font-weight:200; font-size:17px; color:#1C1C1C; } .nav li:hover { border-bottom:2px solid #1C1C1C; } @media screen and (min-width:500px) { .nav li { float:left; padding:16px 25px 13px 25px; font-family:'Advent Pro', sans-serif; font-weight:200; font-size:17px; color:#1C1C1C; } } .reposition { position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); } @media screen and (min-width: 768px) { .reposition { position:static; float:right; -webkit-transform: translate(-0%, -0%); -moz-transform: translate(-0%, -0%); } } .navbar-toggle { margin-top:13px; position:absolute; right:0; } .collapse { height:56px; width:100%; } .navbar-header { float:left; display:inline-block; height:55px; padding:0; margin:0; } .mainbody { width:100%; padding:0 0 20px 0; margin:0; float:left; } .slideshow { width:100%; margin:0; padding:0; } .fadein { width:100%; margin:0; padding:0; } .fadein img { width:95.9%; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } @media screen and (max-width: 1025px) { .fadein img { width:96%; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } } @media screen and (min-width: 1120px) { .fadein img { width:auto; height:85.8%; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } } @media screen and (min-width: 1441px) { .fadein img { width:72.3%; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } } .mainfooter { width:100%; height:20px; position:absolute; bottom:0; margin:0; padding:0; float:left; } .footer { position:relative; bottom:1px; float:right; width:100%; height:20px; padding:0 10px 0 0; background-color:#F8F8F8; border:1px solid #E7E7E7; margin:0; } .copyright { float:right; font-family: 'Advent Pro', sans-serif; font-weight: 100; font-size:12px; margin:0; padding:0; } @media screen and (min-width: 1441px) { .copyright { float:right; font-family: 'Advent Pro', sans-serif; font-weight: 200; font-size:12px; margin:0; padding:0; } } .media li { float:left; list-style:none; position:relative; right:30px; bottom:2px; margin:0 3px 0 3px; padding:0; } @media only screen and (max-width:480px) { .media li { display:none; } } 

 <!DOCTYPE html> <html lang="en"> <body onLoad="switchImage('slideImg')"> <div class="maincontainer"> <div class="mainheader"> <div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="index.html"> <div class="logo"> <p class="name">Tim Corin</p> <p class="type">Wildlife Photography</p> </div> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <div class="reposition"> <ul class="nav navbar-nav"> <a href=""><li class="home">Home</li></a> <a href=""><li class="gallery">Gallery</li></a> <a href=""><li>About</li></a> <a href=""><li>Contact</li></a> <a href=""><li>Blog</li></a> </ul> </div> </div> </div> </div> </div> </div> <div class="mainbody"> <div class="slideshow"> <div class="fadein"> <img src="images/frog.jpg" /> <img src="images/sunrays.jpg" /> <img src="images/beeeater.jpg" /> <img src="images/sunrise.jpg" /> <img src="images/darter.jpg" /> <img src="images/milkyway.jpg" /> </div> </div> </div> <div class="mainfooter"> <div class="footer"> <div class="social"> <ul class="media"> <p class="copyright">Copyright Tim Corin Photography 2015. All Rights Reserved.</p> <a href="http://www.facebook.com/timcorinphotography" target="_blank"><li class="facebook"><img src="images/facebook.png" height="16px"/></li></a> <a href="http://www.instagram.com/timcorinphotography" target="_blank"><li class="instagram"><img src="images/instagram.png" height="16px"/></li></a> <a href="http://www.twitter.com/timcorinphoto" target="_blank"><li class="twitter"><img src="images/twitter.png" height="16px"/></li></a> </ul> </div> </div> </div> <script type="text/javascript" src="scripts.js"></script> <script src="js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </body> </html> 

Answer 1

Looks like the ul in the footer is pushing stuff down. Try adding:

.media {
    margin: 0;
    padding: 0;
}