HTML：页脚宽度问题

Question

我的网页完全正常，我只遇到一个问题：我的网页包含一个“页脚”，但是我想每次都在页面底部的小栏中显示它（不仅仅是向下滚动到页面末尾）。我将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

您需要在width中设置background-color和.footer-links ul，并在.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 {
    margin-bottom:50px;
}