Question

首先让我说这是我的第一篇文章，也是我为学校建设的第一个网站。我只是进入第二周的html / css学习，所以我的知识非常基础。

现在这是我的问题：我的CSS在一页上为我的页脚工作，但另一方面，页脚在页面的中途弹出。我已经通过并检查了一页的代码到另一个，我没有看到任何区别。这是我的CSS代码：

＆＃13;

@charset "utf-8";
/* temporary background color for testing purposes  */
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, el, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;}
body {
  line-height: 1;}
ol, ul {
  list-style: none;}
blockquote, q {
  quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;}
table {
  border-collapse: collapse;
  border-spacing: 0;}
  /* My Styles */
body {
font-family: Arial, Hevetical, sans-serif;
font-size: 100%;
background-color: blue;
width: 80%
border:dashed;
border-color:#FF0004;
margin: 0 auto;
}
header{
	padding: 3em;
	height: 330px;
	margin: 0;
	background-color: lightblue; 
	position: relative;
}
nav{
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: 1em;
}
nav a{
	padding: .25em 5em;
}
section{
	padding: 3em;
}
footer{
	padding: 3em;
	background-color: lightblue;
	text-align: center;
}
aside{
	padding:3em;
	background-color: lightgrey;
}
h1, h2, h3{
	padding-bottom: 1em;
}
h1{
	font-size: 250%;
}
h1 a{
	text-decoration:none;
}
h2{
	font-size: 150%;
}
h3{
	font-size: 80%;
}
.col-1-2{
	width: 32%;
	float: left;
}
.col-2-3{
	width: 65%;
	float: left;
}
.cleafix:before, .clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	clear:both;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Crystal Coast Theater</title>
<link href="../CSS/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header style="text-align:center">
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html"><h1> Crystal Coast Theater.
</h1></a>
<nav style="text-align:center">
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html" >Home</a>
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/event.html">Events</a>
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/ticket.html">Tickets</a>
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/contact.html">Contact us</a>
</nav>
</header>
<div class="container cleatfix">
<aside class="col-1-2">
<h2>Upcoming events:</h2>
<p><span class="emphasis">May 22&nbsp;&ndash;&nbsp;June 8:</span>&nbsp; Daring Last Days of Blackbeard</p>
<p><span class="emphasis">June 11&nbsp;&ndash;&nbsp;June 29:</span>&nbsp; Ghost Stories of the Crystal Coast</p>
<p><span class="emphasis">July 3&nbsp;&ndash;&nbsp;July 20:</span>&nbsp; Beach Rental</p>
<p><span class="emphasis">July 23&nbsp;&ndash;&nbsp;August 10:</span>&nbsp; The Siege of Fort Macon</p>
</aside>
<section class="col-2-3"> 
<h2>Your Down East Playhouse</h2>
<p>The Crystal Coast Theater is located in downtown Moorehead City. It features local talent performing in both renowned plays and in works written by some of the Crystal Coast’s own talented playwrights.</p>
<br>
<p>The Crystal Coast Theater also offers educational performances that bring to life the history and culture of the 85 miles of coastline that are favorite destinations for tourists.</p>
<br>
<p>Check out our upcoming events and make plans to come and see one of our shows.</p>
</section>
</div>
<footer style="text-align:center">
<small>Copyright &copy; 2015 ~~~~~~~~~~ ~~~~~ ~~~~~</small>
</footer>
</body>
</html>

＆＃13;

以下是该页面的HTML代码：

非常感谢任何帮助！

-dark_nemesis

Answer 1

检查一下。 https://jsfiddle.net/x3hztyq2/1/

footer {
padding: 3em;
background-color: lightblue;
text-align: center;
position: absolute;
top: 70em;

为了保持简单，以便老师不会产生怀疑，我已经使用了基本定位。我添加了'position：absolute;'移动它时保持它在轨道上的位置，并且使用'top：70em;'来移动它使用顶部就像让页面顶部将页脚向底部推动，并且位置元素将其保持在原位。使用'em'作为测量值，它使得它在响应不同的屏幕尺寸时更具响应性，我只是添加了因为我有一个habbit：）

页脚在页面中间弹出

1 个答案: