Firefox 和 Chrome 页面底部的空白

Question

几天前我询问了关于在更改 FF 和 Chrome 浏览器窗口的大小时删除页面右侧出现的空白。我很快得到了帮助并解决了这个问题（这里是帖子：Minimizing browser window in Firefox & Chrome adds white space to right of page）。

但相同的提示似乎不适用于底部的空白区域。另外，无论窗口大小，它始终是相同的高度，所以我认为它是padding 或margin，但它似乎不是，因为所有元素都会对底部产生任何影响页面的 padding 和 margin 设置为 0。

有什么想法吗？下面是相关的 HTML 和 CSS。

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

看起来页脚中的ul 将内容向下推。尝试添加：

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