Question

我目前正在自学网络开发。我正在从头开始重新创建一个网站。看起来应该是这样的：

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

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

===========页脚＃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，看起来像垃圾。在不破坏我的版权信息的情况下，无论多长时间都能让两者都坚持到我的页面底部的简洁方法是什么？

Answer 1

.footer指的是类footer

的元素

#footer指的是ID为footer

的元素

footer引用页脚标记

尝试

footer {
    position: fixed;
    bottom: 0;
}

Answer 2

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

＃form1中{ 位置是：固定; 底部：0 }

如果3列浮动，则需要使用clearfix，如clearfix-hack

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

2 个答案: