Firefox和Chrome页面底部的空白区域
问题描述：
我前几天询问了如何在改变FF和Chrome浏览器窗口的大小时删除页面右侧发生的空白。我很快得到了帮助，并解决了这个问题（这里是帖子：Minimizing browser window in Firefox & Chrome adds white space to right of page）。Firefox和Chrome页面底部的空白区域
但是，相同的提示似乎不适用于底部的白色空间。此外，无论窗口大小如何，它总是一样的高度，所以我认为它是padding或margin，但它似乎并不是，因为所有对页面底部有任何影响的元素都有padding和margin设置为0.
任何想法？下面的相关HTML和CSS。
html {
\t margin:0;
\t padding:0;
\t height:100%;
\t width:100%;
\t position:relative;
}
body {
\t margin:0;
\t padding:0;
\t height:100%;
\t width:100%;
\t position:absolute;
\t bottom:0;
\t top:0;
\t left:0;
\t right:0;
}
p {
\t margin:0;
\t padding:0;
\t color:#1C1C1C;
}
img {
\t margin:0;
\t padding:0;
}
.maincontainer {
\t position:relative;
\t padding:0;
\t margin:0;
}
.container {
\t width:100%;
\t min-height:100%;
\t position:relative;
\t margin:0;
\t padding:0;
}
.container:after {
\t content:"";
\t display:block;
}
.logo {
\t float:left;
\t margin-left:20px;
\t font-family:'Advent Pro', sans-serif;
\t font-weight:100;
\t color:#1C1C1C;
}
@media screen and (min-width:768px) {
\t .logo {
\t \t float:left;
\t \t margin-left:5px;
\t \t font-family:'Advent Pro', sans-serif;
\t \t font-weight:100;
\t \t color:#1C1C1C;
\t }
}
.name {
\t float:left;
\t margin:5px 10px 0px 10px;
\t font-size:37px;
}
.type {
\t float:left;
\t width:50px;
\t margin-top:6px;
\t padding:1px 0px 1px 10px;
\t font-size:15px;
\t border-left:1px solid #1C1C1C;
}
.nav {
\t float:right;
\t margin:0;
\t padding:0;
\t list-style:none;
\t width:300px;
}
@media screen and (min-width:500px) {
\t .nav {
\t \t float:right;
\t \t margin:0;
\t \t padding:0;
\t \t list-style:none;
\t \t width:444px;
\t }
}
.nav li {
\t float:left;
\t padding:16px 10px 13px 10px;
\t font-family:'Advent Pro', sans-serif;
\t font-weight:200;
\t font-size:17px;
\t color:#1C1C1C;
}
.nav li:hover {
\t border-bottom:2px solid #1C1C1C;
}
@media screen and (min-width:500px) {
\t .nav li {
\t \t float:left;
\t \t padding:16px 25px 13px 25px;
\t \t font-family:'Advent Pro', sans-serif;
\t \t font-weight:200;
\t \t font-size:17px;
\t \t color:#1C1C1C;
\t }
}
.reposition {
\t position:absolute;
\t left:50%;
\t -webkit-transform: translate(-50%, -0%);
\t -moz-transform: translate(-50%, -0%);
}
@media screen and (min-width: 768px) {
\t .reposition {
\t \t position:static;
\t \t float:right;
\t \t -webkit-transform: translate(-0%, -0%);
\t \t -moz-transform: translate(-0%, -0%);
\t }
}
.navbar-toggle {
\t margin-top:13px;
\t position:absolute;
\t right:0;
}
.collapse {
\t height:56px;
\t width:100%;
}
.navbar-header {
\t float:left;
\t display:inline-block;
\t height:55px;
\t padding:0;
\t margin:0;
}
.mainbody {
\t width:100%;
\t padding:0 0 20px 0;
\t margin:0;
\t float:left;
}
.slideshow {
\t width:100%;
\t margin:0;
\t padding:0;
}
.fadein {
\t width:100%;
\t margin:0;
\t padding:0;
}
.fadein img {
\t width:95.9%;
\t position:absolute;
\t left:50%;
\t -webkit-transform: translate(-50%, -0%);
\t -moz-transform: translate(-50%, -0%);
\t margin:0;
\t padding:0;
}
@media screen and (max-width: 1025px) {
\t .fadein img {
\t \t width:96%;
\t \t position:absolute;
\t \t left:50%;
\t \t -webkit-transform: translate(-50%, -0%);
\t \t -moz-transform: translate(-50%, -0%);
\t \t margin:0;
\t \t padding:0;
\t }
}
@media screen and (min-width: 1120px) {
\t .fadein img {
\t \t width:auto;
\t \t height:85.8%;
\t \t position:absolute;
\t \t left:50%;
\t \t -webkit-transform: translate(-50%, -0%);
\t \t -moz-transform: translate(-50%, -0%);
\t \t margin:0;
\t \t padding:0;
\t }
}
@media screen and (min-width: 1441px) {
\t .fadein img {
\t \t width:72.3%;
\t \t position:absolute;
\t \t left:50%;
\t \t -webkit-transform: translate(-50%, -0%);
\t \t -moz-transform: translate(-50%, -0%);
\t \t margin:0;
\t \t padding:0;
\t }
}
.mainfooter {
\t width:100%;
\t height:20px;
\t position:absolute;
\t bottom:0;
\t margin:0;
\t padding:0;
\t float:left;
}
.footer {
\t position:relative;
\t bottom:1px;
\t float:right;
\t width:100%;
\t height:20px;
\t padding:0 10px 0 0;
\t background-color:#F8F8F8;
\t border:1px solid #E7E7E7;
\t margin:0;
}
.copyright {
\t float:right;
\t font-family: 'Advent Pro', sans-serif;
\t font-weight: 100;
\t font-size:12px;
\t margin:0;
\t padding:0;
}
@media screen and (min-width: 1441px) {
\t .copyright {
\t \t float:right;
\t \t font-family: 'Advent Pro', sans-serif;
\t \t font-weight: 200;
\t \t font-size:12px;
\t \t margin:0;
\t \t padding:0;
\t }
}
.media li {
\t float:left;
\t list-style:none;
\t position:relative;
\t right:30px;
\t bottom:2px;
\t margin:0 3px 0 3px;
\t padding:0;
}
@media only screen and (max-width:480px) {
\t .media li {
\t \t display:none;
\t }
}<!DOCTYPE html>
<html lang="en">
\t <body onLoad="switchImage('slideImg')">
\t
\t <div class="maincontainer">
\t
\t <div class="mainheader">
\t \t <div class="navbar navbar-default">
\t \t \t
\t \t \t <div class="container">
\t \t \t
\t \t \t \t <div class="navbar-header">
\t \t \t
\t \t \t \t \t <a href="index.html">
\t \t \t
\t \t \t \t \t \t <div class="logo">
\t \t \t
\t \t \t \t \t \t \t <p class="name">Tim Corin</p>
\t \t
\t \t \t \t \t \t \t <p class="type">Wildlife Photography</p>
\t \t \t \t
\t \t \t \t \t \t </div>
\t \t \t
\t \t \t \t \t </a>
\t \t \t \t \t \t \t \t
\t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
\t \t \t \t \t
\t \t \t \t \t \t <span class="sr-only">Toggle navigation</span>
\t \t \t \t \t
\t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t
\t \t \t \t \t </button>
\t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="collapse navbar-collapse">
\t \t
\t \t \t \t \t <div class="reposition">
\t \t \t \t \t
\t \t \t \t \t <ul class="nav navbar-nav">
\t \t \t \t \t
\t \t \t \t \t \t <a href=""><li class="home">Home</li></a>
\t \t \t \t \t \t <a href=""><li class="gallery">Gallery</li></a>
\t \t \t \t \t \t <a href=""><li>About</li></a>
\t \t \t \t \t \t <a href=""><li>Contact</li></a>
\t \t \t \t \t \t <a href=""><li>Blog</li></a>
\t \t \t \t \t \t
\t \t \t \t \t </ul>
\t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t
\t \t \t \t </div>
\t \t \t
\t \t \t </div>
\t \t \t
\t \t </div>
\t \t
\t </div>
\t \t
\t </div>
\t \t
\t <div class="mainbody">
\t \t
\t \t <div class="slideshow">
\t \t \t
\t \t \t <div class="fadein">
\t \t \t \t
\t \t \t \t <img src="images/frog.jpg" />
\t \t \t \t <img src="images/sunrays.jpg" />
\t \t \t \t <img src="images/beeeater.jpg" />
\t \t \t \t <img src="images/sunrise.jpg" />
\t \t \t \t <img src="images/darter.jpg" />
\t \t \t \t <img src="images/milkyway.jpg" />
\t \t \t
\t \t \t </div>
\t \t \t
\t \t </div>
\t \t
\t </div>
\t
\t <div class="mainfooter">
\t
\t \t <div class="footer">
\t
\t \t \t <div class="social">
\t \t \t \t
\t \t \t \t <ul class="media">
\t \t \t
\t \t \t \t \t <p class="copyright">Copyright Tim Corin Photography 2015. All Rights Reserved.</p>
\t \t \t \t
\t \t \t \t \t <a href="http://www.facebook.com/timcorinphotography" target="_blank"><li class="facebook"><img src="images/facebook.png" height="16px"/></li></a>
\t \t \t \t \t <a href="http://www.instagram.com/timcorinphotography" target="_blank"><li class="instagram"><img src="images/instagram.png" height="16px"/></li></a>
\t \t \t \t \t <a href="http://www.twitter.com/timcorinphoto" target="_blank"><li class="twitter"><img src="images/twitter.png" height="16px"/></li></a>
\t \t \t \t
\t \t \t \t </ul>
\t \t \t \t
\t \t \t </div>
\t \t \t
\t \t </div>
\t \t
\t </div>
\t
\t <script type="text/javascript" src="scripts.js"></script>
\t \t \t
\t <script src="js/bootstrap.min.js"></script>
\t \t
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t
\t </body>
\t
</html>
答
看起来像在页脚中ul正在推动的东西了。尝试添加：
.media {
margin: 0;
padding: 0;
}
知道这是一个简单的修复。我很惊讶你们发现这样的事情有多快。谢谢@威尔！ –
您是否使用Firebug或Chrome的开发者工具？ “检查”元素并实时调整此CSS通常比在您的编辑器中进行调试要快（用于调试）。这和大量的'background-color：red'来看看究竟在哪里。 ;） – Will
从未尝试过，没有。我肯定会检查一下，因为我赢了;不需要为这些简单的事情来到这里，哈哈。哦，是的，我使用很多背景颜色:)。谢谢@威尔 –