使用带有两个单独页脚的粘性页脚的问题答案

【问题标题】：problems with using sticky footer with two sepperate footers使用带有两个单独页脚的粘性页脚的问题
【发布时间】：2017-08-02 16:01:27
【问题描述】：

我目前正在自学 Web 开发。我正在从头开始重建一个网站。它应该看起来像这样：

===========导航栏=============

=========网站正文============

===========页脚#1============

===========页脚#2============

而我的基本代码结构是：

<body class="main-body">
  <form id="form1">
    <footer id="footerContainer">
      <div class="ContainerBlock">
        <section class="big-blue">
          <div class="Container">
            <div class="rows">
              <div>(these are columns)</div>
              <div>(these are columns)</div>
              <div>(these are columns)</div>
              <div>(these are columns)</div>
            </div>
          </div>
        </section>
        <section class="copyrights">
          <div class="container">
            <div class="rows">
              <div>
                <small>copyright text</small>
              </div>
              <div>
                <a href="a link!!!">
                  <img alt="im an image" src="im an image"/>
                </a>
              </div>
            </div>
          </div>
        </section> 
      </div>
    </footer>
  </form>
</body>

页脚 1 是在列中列出的页面链接列表，页脚 2 是版权信息和一些交互式图像。页脚 1 是一个纯蓝色块，我需要将它放在页脚纯白色块的顶部。

我尝试过使用：

.footer
{
position: absolute;
bottom:0;
}

和（这是当前设置的）：

.footer
{
position: relative;
bottom:0;
}

和：

.footer
{
position: fixed;
bottom:0;
}

和：

#footer
{
position: absolute;
bottom:0;
}

我一直在改变我的部分和页脚的位置。我玩过更改填充值，但无论我做什么，它都坚决位于页面中间。

如果我将两个页脚都设置为：

position:relative;
bottom: 0;

然后页脚 1 压碎页脚 2，看起来像垃圾。有什么干净的方法可以让两者都粘在我的页面底部，不管它有多长，而不会破坏我的版权信息？

【问题讨论】：

请在您的问题中添加代码 sn-p。

标签： css html sticky-footer

【解决方案1】：

.footer指的是类为footer的元素

#footer指的是id为footer的元素

footer 指页脚标签

试试

footer {
    position: fixed;
    bottom: 0;
}

【讨论】：

很遗憾，这并没有改变我的立场。

【解决方案2】：

你的问题不是很清楚。如果不需要表单，为什么要使用表单标签？因此，如果您希望将所有页脚固定在页面底部，则必须添加以下代码：

#form1{ 位置：固定；底部：0 }

如果 3 列是浮动的，您需要像这样使用 clearfix clearfix-hack

【讨论】：