我想要一个固定在页面底部(以及左侧和右侧)的页脚 div。但是，我的页脚 div 并没有一直向下和向左。我怎样才能解决这个问题？ (没有“位置:固定；”)
这是我的代码:(我将所有文本更改为点，页脚 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>最佳答案
看起来您缺少结束 H4 标签。所以浏览器隐式地将它添加到结束 body 标签之前，也就是页脚之后。通过将结束 H4 标签放在页脚之前，您应该可以开始了。
关于html - 页脚 div 不会粘在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41924691/