HTML：页脚宽度问题

Question

我的网页完全没问题，我只有一个问题：我的网页包含一个 "footer"，但我想每次都在页面底部的一个小栏中显示它（不仅仅是当我向下滚动到页面末尾时）。我将 z-index 设置为 1（所以它在所有其他东西的前面）并且还给它一个背景颜色。但出于某种原因，它就在左下角，而且很小，我试着将宽度设置为 100%，但由于某种原因，这并没有改变什么。这是我的 html 代码：

.footer-links{
  z-index: 1; 
}

.footer-links ul{
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none; 
  position: fixed;
  bottom: 0;
}

.footer-links ul li a{
  width: 100%;
  padding: 0;
  color: white;
  text-decoration: none; 
  font-size: 14px;
  background-color: black;
}

 <!-- Footer -->
<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>

Answer 1

您需要在.footer-links ul中设置width和background-color，并在.footer-links

上设置左边界

.footer-links{
  width: 100%;
  position: absolute;
  background-color: black;
  bottom: 0px;
  left:0;
}

.footer-links ul{
  width: 100%;
  background-color: black;
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none; 
  position: fixed;
  bottom: 0;
}

.footer-links ul li a{
  padding: 0;
  color: white;
  text-decoration: none; 
  font-size: 14px;
  background-color: black;
}

<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>

Answer 2

如果你想要修复页脚，你可以使用：

您的页脚：

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

为了你的body:

body {
    margin-bottom:50px;
}

Answer 3

我建议您对 CSS 进行一些调整，因为正在进行大量不必要的格式设置。这是我的建议：

.footer-links{
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.footer-links ul{
  display: flex;
  list-style: none; 
}

.footer-links ul li a{
  padding: 0;
  text-decoration: none;
  color: white;
  font-size: 14px;
}

<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>

Answer 4

是这样的吗？ JSFiddle：https://jsfiddle.net/4waLb0qu/

HTML代码：

<div class="content">
<p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p>
<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>
</div>

CSS:

.content {
  height: 100px;
  float: left;
  position: relative;
  width: 100%;
}

.footer-links{
  width: 100%;
  background-color: red;
  position: fixed;
  height: 35px;
  bottom: 0;
}

.footer-links ul{
  list-style: none;
}

.footer-links ul li a{
  padding: 0;
  color: white;
  text-decoration: none;
  font-size: 14px;
  background-color: black;
  float: left;
}

HTML：页脚宽度问题

HTML: Footer width issue

html

css

width

footer