html - 我的页脚已经移动到页面的一半位置，我有不必要的滚动

Question

所以我最近在我的网站上添加了一种气泡幻灯片 esc 东西，让它变得更好一点。由于某些无法解释的原因，这将我的页脚推到了页面底部(并且它还向下扩展了页面，所以现在我必须滚动，即使所有内容都应该能够适合页面)。我昨天一直在弄乱它以弄清楚如何修复它(我在 CSS 方面不是很有经验)，但我找不到有问题的行。现在，今天我检查我的本地主机，页面完全搞砸了，页脚在页面的一半位置，请注意我仍然可以选择滚动，即使超过一半的页面完全空白。

下面是我的 CSS，涉及我用来制作页脚的所有不同样式(这可能是不必要的，但再一次，菜鸟)。昨晚绝对不同，因此今天一切都搞砸了，但我最近的备份没有页脚。

html,
body {
  margin: 0;
  padding: 0;
  height: 90%;
}
#container {
  min-height: 100%;
  bottom: 0;
  position: relative;
}
#footer {
  width: 100%;
  height: 60px;
  bottom: 0;
  background: #DADADA;
  display: block;
}
ul2 {
  list-style-type: none;
  margin: 0;
  text-align: center;
  display: block;
  bottom: 0;
  padding: 20px 16px;
}
li5 a {
  text-family: verdana;
  color: black;
  padding: 20px 20px;
  text-align: center;
  text-decoration: none;
}

<div id="container">
  <div id="footer">
    <ul2>
      <li5><a href="Contact.html">Contact Us</a>
      </li5>
      <li5>A test project</li5>
      <li5><a href="About.html">About</a>
      </li5>
    </ul2>
  </div>
</div>

Answer 1

更改您的 height:90%至 100%在html/body设置 position:absolute或 fixed在#footer (取决于你是否想要滚动并让页脚固定或不固定，我不清楚)

注意:没有属性text-family , 使用 font-family相反

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#container {
  min-height: 100%;
  bottom: 0;
  position: relative;
}
#footer {
  position: fixed; /* or - absolute - */
  width: 100%;
  height: 60px;
  bottom: 0;
  background: #DADADA;
  display: block;
}
ul {
  list-style-type: none;
  margin: 0;
  text-align: center;
  display: block;
  bottom: 0;
  padding: 20px 16px;
}
li a {
  font-family: verdana;
  color: black;
  padding: 20px;
  text-align: center;
  text-decoration: none;
}

<div id="container">
  <div id="footer">
    <ul>
      <li><a href="Contact.html">Contact Us</a>
      </li>
      <li>A test project</li>
      <li><a href="About.html">About</a>
      </li>
    </ul>
  </div>
</div>