几天前我问过在更改FF和Chrome浏览器窗口大小时删除页面右侧发生的空白区域。我得到了很快的帮助并解决了问题（这里是帖子：Minimizing browser window in Firefox & Chrome adds white space to right of page）。
但同样的提示似乎并不适用于底部的白色空间。另外，无论窗口的大小如何，它总是相同的高度，所以我认为它是margin或padding，但它似乎并不像所有要素那样如果页面底部有任何影响，margin和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;
}
}设置为0。
有什么想法吗？下面的相关HTML和CSS。
<!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>1.2.3-prefix.42
答案 0 :(得分：3)
看起来页脚中的ul正在推送内容。尝试添加：
.media {
margin: 0;
padding: 0;
}