Question

我在这里有一个html页面，我想在页面下方添加2个页脚。但是我的问题是第二个页脚与第一个页脚合并。有人可以告诉我解决方案吗？

这是我的页脚代码：

#footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #787a7c;
  color: white;
  padding: 0px 0px 18px 0px;
}

.footerLinks a {
  text-decoration: none;
  color: #f2f2f2;
  font-size: 10px;
  font-family: Malgun Gothic;
}

.footerLinks a:hover {
  text-decoration: underline;
}

.lowerFooter {
  background-color: orange;
}

.footerLinks {
  float: left;
  position: relative;
}

<div class="contextSize">
  <div id="footer">
    <div class="upperFooter content">
      <nav class="footerLinks">
        <a href="#">개인정보처리방침 
                                                 </a> |
        <a href="#">이메일무단수집거부 
                                                 </a> |
        <a href="#">사이트맵</a> |
        <a href="#">찾아오시는 길</a>
      </nav>
      <h6 class="account">ADMIN
        <h6>
    </div>
    <div class="lowerFooter content">
      sample
    </div>
  </div>
</div>

编译时，两个页脚彼此合并。

Answer 1

它们不会彼此合并。尝试将背景应用于每个背景，以便可以看到它。您为周围的元素设置了背景，但没有为上页脚设置背景。看到这里：

 
/*CSS code snippet*/
 #footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     background-color: red; /* changed */
     color: white;
     padding: 0px 0px 18px 0px;
}
 .footerLinks a {
     text-decoration: none;
     color: #f2f2f2;
     font-size: 10px;
     font-family: Malgun Gothic;
}
 .footerLinks a:hover {
     text-decoration: underline;
}
 .lowerFooter {
     background-color: orange;
}
 .footerLinks {
     float: left;
     position: relative;
}

/* added: */
 .upperFooter {
     background: green;
}

.upperFooter,  .lowerFooter {
     padding: 10px;
     margin: 0;
}

<!-- HTML Code Snippet-->
<div class="contextSize">
    <div id="footer">
        <div class="upperFooter content">
            <nav class="footerLinks">
                <a href="#">개인정보처리방침 
                                             </a> |
                <a href="#">이메일무단수집거부 
                                             </a> |
                <a href="#">사이트맵</a> |
                <a href="#">찾아오시는 길</a>
            </nav>
            <h6 class="account">ADMIN</h6>
        </div>
        <div class="lowerFooter content">
            sample
        </div>
    </div>
</div>

另一个提示：您的结帐</h6>中也没有/。

如何使用HTML和CSS在页面底部制作2个固定的页脚？

1 个答案: