Question

首先是代码：

CSS：

＆＃13;

*{
	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:

＆＃13;

<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');?>

＆＃13;

现在我的页脚有问题。如果我在包装器外添加一个页脚，它将出现在新闻源内。它不是全屏宽度，虽然我添加宽度：100％。 footer.php只包含带文本的div。如何修复它始终位于底部的页脚。不固定但总是在新闻源下，而不是在新闻源中。

谢谢！

Answer 1

从CSS页脚选择器中删除position:absolute;和float:left;。这些属性将其从常规文档流程中删除。

Answer 2

您可以尝试在php文件中使用页脚标记，而不是普通的div。

页脚不起作用

2 个答案: