html - 页脚不起作用

Question

首先是代码:

CSS:

*{
	margin:0;
	padding:0;
}
body,html{
    height:100%;
	
}
body{
background:url('../images/bg.png');
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
    height:100%;
    min-height:100%;
	width:100%;
}
#wrapper{
    width: 900px;
    margin: 0 auto;
	margin-top:120px;
    position:relative;
}
.newscard a{

	text-decoration:none;
	color:white;
	font-family:bebas;

}

#p1{
padding:10px;
font-family:bebas;

}
.textfeed{
font-family:Arial;
font-size:17px;
}
.newsfeed h1{

	text-align:center;
	font-family:bebas;
	font-size:35px;
	margin-bottom:10px;
	color:white;
}
.newslink{
margin-top:30px;
text-align:center;

}
.newslink p{
background:blue;
padding:10px;

}
.newscard{

	margin-left:50px;
	
	display:inline;

	padding:20px;
	border-radius:5px;
	
}
.newsfeed{
	margin-top:50px;
	margin-bottom:50px;
	width:89%;
	padding:50px;
	background:rgba(81, 162, 224, 0.4);

}


.wrap {
   overflow: hidden;
   margin: 10px;
}
.box {
	margin-top:40px;
	background:rgba(64, 64, 64, 0.8);
	margin-right:20px;
	color:white;
   float: left;
   position: relative;
   width: 30%;
   border-radius:5px;
}
.text{
font-family:Arial;
padding:10px;
}
.titlen{
font-family:bebas;
text-align:center;
margin-bottom:20px;
font-size:20px;
}


.footer{
	position:absolute;
	width:100%;
	height:200px;
	background: #32658d;
	text-align:center;
	bottom:0;
	z-index:1;
	box-shadow: 0px 5px 40px -5px rgba(0,0,0,0.75);
	float:left;

}
.footer .ul{

	padding:10px;
	position:relative;
	float:left;
	margin-left:200px;
}
.footer .ul li{
	
	padding:5px;
	list-style-type:none;
	display:inline;


}
.footer .ul li a{
	font-family: bebas;

	font-size:18px;
	
	padding:0px 25px;
	text-decoration:none;
	color:white;

}

.footer .ul li a:hover{
	
	color:#404040;
	font-weight:bold;
}

HTML:

<div id="wrapper">

	<div class="dia">
		<img src="images/eslone.jpg"/>
		<span id="span1">WIR HABEN UNS FUER DIE ESL ONE COLOGNE 2016 QUALIFIZIERT</span>
		<span id="span2">WE DID IT!</span>
	</div>
	
	<div class="sponsors">
		<img src="images/ibp.png" width="100px"/>
		<img src="images/hyper.png" width="180px"/>
		<img src="images/eizo.png" width="180px"/>
	</div>
	
	<div class="newsfeed">
	<h1>News</h1>
		<div class="wrap">
		<?php 
			$abfrage = "SELECT * FROM news ORDER BY id DESC LIMIT 6";
			$result = mysql_query($abfrage);
			
			
			while ($row = mysql_fetch_array($result)) {
			
		?>
		<div class="newscard">
			<?php
					$title = $row[1];
					$text = $row[2];
					$autor = $row[3];
					$date = $row[4];
					$thumb = $row[5];
					$phpdate = strtotime( $date );
					$date = date( 'd.m.Y', $phpdate );
					if(strlen($text) > 200){
						$text = substr($text,0,200)."...</br></br><a href='news.php' ><p align='center'>Weiter<img src='images/Next.png' width='15'/></p></a>";
					}else{
					
					}
					echo "<div class='box'>
							   <div class='thumbnail'>
								<img src='".$thumb."' width='234px' style='border-radius:5px'/>
							   </div>
							   
							  <div class='text'>
								<div class='titlen'>
									".$title."
								</div>
								".$text."
							  </div>
							  <div class='nff'>
							  
								<p id='p1'>".$autor." &nbsp;- &nbsp;".$date."</p>

							  </Div>
						</div>
						
						
					";
					
				}

				
			?>
		</div>

		
	</Div>
	</Div>
	
</Div>

<?php include('footer.php');?>

现在我遇到了页脚问题。如果我在包装外添加页脚，它将出现在新闻提要内。它不是全屏宽度，尽管我添加了 width:100%。 footer.php 仅包含带有文本的 div。我怎样才能修复它总是在底部的页脚。不固定，但总是在新闻源下，而不是在新闻源中。

谢谢!

Answer 1

从 CSS 页脚选择器中删除 position:absolute; 和 float:left;。这些属性使它脱离了常规文档流。