页脚 div 不会固定在页面底部

Question

我想要一个页脚 div 贴在页面的底部（以及左侧和右侧）。但是，我的页脚 div 并没有一直向下和向左。我怎样才能解决这个问题？（没有"position: fixed;"）

这是我的代码：（我将所有文本更改为点，页脚 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>

Answer 1

您的页脚 div 在 h4 标签内。您需要在页脚前关闭 h4。

Answer 2

您似乎缺少结束 H4 标签。所以浏览器隐式地将它添加到结束 body 标签之前，也就是页脚之后。通过将结束 H4 标签放在页脚之前，您应该可以开始了。

Answer 3

您可以从具有 3 个区域的模板构建 HTML 结构：header、main 和 footer，并使用弹性模型轻松修复（推送）您的底部的页脚 .

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内容一起向上滚动；

页脚 div 不会固定在页面底部

Footer div won't stick to bottom of the page

html

css

position

footer