Question

所以我最近在我的网站上添加了一种bubble-slideshow esc的东西，以使它更好一些。由于一些无法解释的原因，这将我的页脚推到了我的页面的底部（它也向下扩展了页面，所以现在我必须滚动，即使一切都应该能够适合页面）。我昨天搞砸了它以弄清楚如何解决它（我对CSS不是很有经验），而且我找不到有问题的线。现在我今天检查我的本地主机，页面完全搞砸了，页脚在页面的一半上方，我是否会注意到我仍然可以选择滚动，即使超出页面的一半，它也完全是空白的。

下面是我的CSS，涉及我用来制作页脚的所有不同样式（这可能不仅仅是必要的，但是再次，noob）。它昨晚完全不同，因此它为什么今天都搞砸了，但我最近的备份并没有页脚。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

将height:90%设置为100% html/body或position:absolute fixed中的#footer更改为text-family（具体取决于您是否要滚动并设置页脚）固定与否，我不清楚）

注意：没有财产font-family，请改用<{1}}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

此外，您可以尝试此代码，无需额外的容器：

<html>
<head>
<style>
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
}
#footer {
  width: 100%;
  bottom: 0;
  background: #DADADA;
  display: block;
  position: absolute;
}
ul {
  list-style-type: none;
  margin: 0;
  text-align: center;
  display: block;
  bottom: 0;
}
li{
  font-family: verdana;
  color: black;
  padding: 20px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
</style>
</head>
<body>
  <div id="footer">
    <ul>
      <li><a href="Contact.html">Contact Us</a>
      </li>
      <li>A test project</li5>
      <li><a href="About.html">About</a>
      </li>
    </ul>
  </div>
</body>
</html>

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

2 个答案: