首先让我说这是我的第一篇文章，也是我为学校建立的第一个网站。我才进入 html/css 学习的第二周，所以我的知识还很基础。
现在这是我的问题:我的 CSS 在一个页面上适用于我的页脚，但在另一页上，页脚会在页面中途弹出。我已经仔细检查了一页的代码，并检查了另一页的代码，但没有发现任何区别。这是我的 CSS 代码:
@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;
}<!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 – June 8:</span> Daring Last Days of Blackbeard</p>
<p><span class="emphasis">June 11 – June 29:</span> Ghost Stories of the Crystal Coast</p>
<p><span class="emphasis">July 3 – July 20:</span> Beach Rental</p>
<p><span class="emphasis">July 23 – August 10:</span> 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 © 2015 ~~~~~~~~~~ ~~~~~ ~~~~~</small>
</footer>
</body>
</html>这是问题页面的 HTML 代码:
如有任何帮助，我们将不胜感激!
-黑暗克星
最佳答案
检查一下。 https://jsfiddle.net/x3hztyq2/1/
footer {
padding: 3em;
background-color: lightblue;
text-align: center;
position: absolute;
top: 70em;
为了简单起见，以免您的老师起疑，我使用了基本定位。我添加了“position:absolute；”为了在移动它时保持它的位置在轨道上，为了移动它我使用了'top: 70em;'使用 top 就像让页面顶部将页脚推向底部，而 position 元素将其保持在原位。使用“em”作为测量值，当涉及到不同的屏幕尺寸时，它会更灵敏，我只是添加了它，因为我有它的习惯:)
关于html - 页脚在页面中途弹出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33661263/