我想要一个粘贴在页面底部（和左侧和右侧）的页脚div。但是，我的页脚div并没有完全向下和离开。我怎样才能解决这个问题？ （没有＆＃34;位置：固定;＆＃34;）
这是我的代码:(我将所有文本更改为点，页脚div是代码中的最后一个div。
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
height: 100%;
margin: 0px;
background-color: #FFFFFF;
overflow-x: hidden;
}
ul {
position: fixed;
list-style-type: none;
margin-right: 0;
margin-top: 0;
margin-left: 0;
right: 0px;
left: 0px;
padding-left: 20px;
padding-right: 0px;
overflow: hidden;
background-color: #262626;
z-index: 2;
top: 0px;
}
li {
float: left;
}
li a {
display: inline-block;
color: #b3b3b3;
text-align: center;
padding: 18px 20px;
text-decoration: none;
}
a:hover {
color:white;
}
li img {
padding-left: 0px;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #262626;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #bfbfbf;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #4d4d4d;
color: white;}
.dropdown:hover .dropdown-content {
display: block;
}
h1 {
text-align: center;
color: #262626;
font-family: proxima-nova, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 45px;
letter-spacing: 1.5px;
margin-top: 88px;
}
h4 {
position: relative;
left: 100px;
text-align: left;
color: #404040;
font-size: 16 px;
letter-spacing: 0.8px;
line-height: 34px;
background-color: transparent;
word-spacing: 0.5px;
}
.albumcovers {
position: relative;
float: right;
margin-right: 5px;
}
.audio1 {
position: relative;
width: 500px;
left: 320px;
bottom: 342px;
}
.audio2 {
position: relative;
width: 500px;
right: 186px;
bottom: 307px;
}
.audio3 {
position: relative;
width: 500px;
left: 320px;
bottom: 316px;
}
.audio4 {
position: relative;
width: 500px;
right: 186px;
bottom: 281px;
}
.audio5 {
position: relative;
width: 500px;
left: 320px;
bottom: 290px;
}
.audio6 {
position: relative;
width: 500px;
right: 186px;
bottom: 255px;
}
.audio7 {
position: relative;
width: 500px;
left: 320px;
bottom: 264px;
}
.audio8 {
position: relative;
width: 500px;
right: 186px;
bottom: 229px;
}
.audio9 {
position: relative;
width: 500px;
left: 320px;
bottom: 238px;
}
.audio10 {
position: relative;
width: 500px;
right: 186px;
bottom: 203px;
}
.dec1 {
text-align: center;
color: #cccccc;
font-size: 16px;
position: relative;
margin-bottom: 70px;
word-spacing: 150px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding-left: 7px;
background-color: #1a1a1a;
text-align: left;
color: #666666;
font-size: 12px;
}<!DOCTYPE html>
<html>
<head>
<title>
.
</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300|Varela" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="PlaylistReggae.css">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta charset="UTF-8">
</head>
<body>
<ul>
<li><a href="hiphop.html"><img src="hiphop.png" alt="HIPHOP" style="width:120px;height:18px;"></a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">.</a>
<div class="dropdown-content">
<a href="Reggae.html">.</a>
<a href="OldSchool.html">.</a>
<a href="Modern.html">.</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">.</a>
<div class="dropdown-content">
<a href="PlaylistReggae.html">.</a>
<a href="PlaylistOldSchool.html">.</a>
<a href="PlaylistModern.html">.</a>
<a href="* Nog in te vullen *">.</a>
</div>
</li>
<li><a href="about.html">.</a></li>
<li><a href="contact.html">.</a></li>
</ul>
<h1>.</h1>
<div class="dec1">
_____________________________________________________________________________________________________________________________
</div>
<img class="albumcovers" src="albumreggae.png" alt="Reggae Album Covers" style="width:315px;height:317px;">
<h4>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<audio controls class="audio1">
<source src="TLB.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls class="audio2">
<source src="CTD.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls class="audio3">
<source src="ITL.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls class="audio4">
<source src="BFS.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls class="audio5">
<source src="SWT.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls class="audio6">
<source src="CDP.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls class="audio7">
<source src="MDR.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls class="audio8">
<source src="WIV.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls class="audio9">
<source src="NRS.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls class="audio10">
<source src="MMD.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="footer">This is the footer.</div>
</body>
</html>
答案 0 :(得分：0)
你的页脚div在h4标签内。你需要在页脚之前关闭h4。
答案 1 :(得分：0)
看起来你错过了关闭的H4标签。因此，浏览器会在关闭的body标记之前隐式添加它，该标记位于页脚之后。通过在页脚之前放置关闭的H4标签，你应该很高兴。
答案 2 :(得分：0)
您可以从包含3个区域的模板构建HTML结构：header，main＆amp; footer并使用flex模型轻松地将页脚固定（推）到底部。
html,
body {
height: 100%;
margin: 0
}
/* layout */
body {
display: flex;
flex-flow: column;
}
main {
flex: 1;
overflow: auto;
background:tomato;
}
/* demo , show main scrolling*/
main:after {
content: ' end';
}
main:hover:after {
display: flex;
align-items:flex-end;
height: 100vh;
}<header>stuff that comes in header. Any height</header>
<main>content that comes here, ican overflow </main>
<footer>fonter at view. Any height</footer>
如果您不希望修复header，请将其插入main内，它将向上滚动剩余的main个内容;