HTML 正文中的图像元素似乎没有包含在正文中，新元素会将它们推到页面下方，如 <footer> 所示。标签如下所示:
.
设置 height/min-height 为 100% 是无效的。 HTML 验证器出现的唯一问题是图像没有替代文本。
html,body {
margin:0px;
background-image: url("bilder/curtains.jpg");
background-size:auto;
}
body {
border:solid 1px orange;
min-height:100%;
}
header {
font-family:Cinzel;
height:75px;
background-color:black;
color:#fff;
border-bottom: 4px dotted white;
box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
color:#e5c006;
margin-bottom:50px;
}
header img {
float: left;
margin-right: 1em;
}
header h1 {
margin: 0px;
}
header h3 {
margin: 0px;
}
nav {
position: absolute;
top:25px;
right:2em;
}
nav ul {
margin: 0px;
}
nav li {
display: inline-block;
margin:5px;
}
nav a {
text-decoration: none;
color:#fff;
}
nav a:hover {
transition: width 5s, height 4s;
color:#e5c006;
}
.poster_container {
display:inline-block;
z-index:-1 ;
padding:0;
margin:auto;
height:130%;
background-color:black;
position:relative;
width:130%;
left:-15%;
top:-15%;
border: 3px solid gold;
}
#theater_1 {
float:left;
text-decoration:none;
color:gold;
width:30%;
height:500px;
margin:50px;
text-align:center;
background-image: url('bilder/it_movie_poster.jpg');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
margin-left:10%;
border:2px solid gold;
}
#theater_2 {
float:right;
width:30%;
height:500px;
margin:50px;
color:gold;
text-align:center;
background-image: url('bilder/the_big_sick_movie_poster.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
margin-right:10%;
border:2px solid gold;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Pop Theater</title>
<link rel = "stylesheet" type = "text/css" href = "pracstyle.css"/>
<link rel="shortcut icon" href="title_image_2.ico"/>
</head>
<body>
<header>
<a href="home.html"><img src="#" /></a>
<h1>The Practice Theater</h1>
<h3>Entertaining the Beverly Hills since 1776</h3>
<nav>
<ul>
<li><a href="home.html">Now Showing</a></li>
<li><a href="coming_soon.html">Coming Soon</a></li>
<li><a href="history.html">History</a></li>
<li><a href="#">Deals</a></li>
<li><a href="advertise.html">Advertise Here!</a></li>
</ul>
</nav>
</header>
<a href="theater_1.html">
<div id="theater_1">
<div class="poster_container">
</div>
</div>
</a>
<a href="theater_2.html">
<div id="theater_2">
<div class="poster_container">
</div>
</div>
</a>
<footer>
<h2>THE FOOTER APPEARS HERE</h2>
</footer>
</body>
</html>最佳答案
当元素 float 时，它们从文档的其余部分流出，会给你这样奇怪的结果。
最简单的解决方案是在页脚中添加一个 clear。 clear more or less 告诉元素清除 float 项，或者移到它们下面，而不是在它们下面。
footer {
clear: both;
}
为了更好地控制事物，我建议还查看 clearfix .
关于html - 为什么我的页脚会浮到顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46121617/