时间戳

首页 > 解决方案 > 如何使用 HTML 和 CSS 在页面底部制作 2 个固定页脚？

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

问题描述

我这里有一个 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="#">찾아오시는 길&lt;/a>
      </nav>
      <h6 class="account">ADMIN
        <h6>
    </div>
    <div class="lowerFooter content">
      sample
    </div>
  </div>
</div>

编译时，两个页脚相互合并。

标签： htmlcss

解决方案

它们不会相互合并。尝试为它们中的每一个应用背景，以便您可以看到它。您为周围元素设置背景，但不为上部页脚设置背景。看这里：

 
/*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="#">찾아오시는 길&lt;/a>
            </nav>
            <h6 class="account">ADMIN</h6>
        </div>
        <div class="lowerFooter content">
            sample
        </div>
    </div>
</div>

另一个提示：你的结尾</h6>也没有 / 。

推荐阅读