Question

所以我有这个直截了当的页面：

<div class="page-wrapper">
    <div class="page-header">Some navigation stuff goes in here</div>
    <section class="page">The content goes here</section>
</div>

<footer class="page-footer">Guess what this is for?</footer>

我有这个CSS使页脚粘到页面底部：

html,
body {
  height: 100%;
}

.page-header {
  color: white;
  background-color: #1f1f1f;
  height: 75px;
}

.page {
  margin: 20px 0 0;
}

.page-wrapper {
  min-height: 100%;
  margin-bottom: -340px;
  &:after {
    content: "";
    display: block;
    height: 340px;
  }
}

.page-footer {
  padding: 0;
  margin: 20px 0 0;
  border: 0;
  border-radius: 0;
  color: white;
  text-align: center;
  background-color: #1f1f1f;
  text-align: left;
  height: 340px;
}

出于插图的目的，here is a codepen。现在，这一切都运行良好，但我的客户要求第二个页脚，但这次它并没有出现在所有页面上，而在 .page内包装器。 Here is a codepen to illustrate this.

如您所见，第二个页脚无法连接到页面底部（主页脚上方）。我尝试过很多像flexbox和绝对定位这样的东西，但是我无法让它工作。谁能提供任何解决方案？我需要再次指出，我无法更改 .view-footer 的位置。

Answer 1

如果您需要以下订单：

标题
内容
查看页脚
页脚

并且您没有特定的页面长度，您可以使用常规div（display: block）项目将所有内容置于另一个之下。

使用块将允许您使每个元素获得屏幕的整个宽度，而每个元素都显示在前一个元素的下方。

这里是fixed version of your codepen。

如果您希望页脚粘贴到内容的底部（假设站点的.page部分需要一定的固定高度），则只能对页脚使用绝对定位。

这里是codepen example： - ）

Answer 2

我会在页脚上使用这些设置：

position: fixed;
bottom: 0px; 
left: 0px;
width: 100%;
height: 340px;

这是为了确保页脚下无法隐藏任何内容（即整页内容可以从页脚后面向上滚动）：

.page { margin-bottom: 340px; }

这将包括第二个页脚向上滚动。如果它还需要粘贴在第一个页脚上方，请同时提供position fixed，加上bottom: 340px，并相应地增加内容的下限。

Answer 3

所以，如果我做对了，你想要一个页面，如果内容比视口短，那么页脚就会粘到底部。在一些页面中，你有一个额外的页脚，它必须高于原始页脚但它不在DOM之前，它是在它之前的元素内。

如果您的页脚具有固定高度，那么事情就不会那么艰难了。在第一步中，您必须将.page-wrapper min-height设置为calc(100% - page-footer-height)，这意味着：

.page-wrapper {
  min-height: calc(100% - 340px);
  position: relative;
}

解决了粘性.page_footer问题。

现在，由于.page-wrapper的底部始终触及.page-footer的顶部，您可以将.view-footer放在position-absolute的底部，不幸的是，.page隐藏.view-footer。

的内容

此时，您有两个选项，要么在.page之后添加一个额外的元素作为占位符来模拟空间，要么您必须将一个修饰符类添加到padding-bottom或一些要添加.view-footer等于html, body { height: 100%; } .page-header { color: white; background-color: #1f1f1f; height: 75px; } .page { margin: 20px 0 0; background-color: pink; } .view-footer { background-color: #dcdcdc; border-top: 1px solid #adadad; margin: 20px 0 -20px 0; padding: 50px 0; position: absolute; width: 100%; bottom: 0; } .page-wrapper { min-height: calc(100% - 340px); position: relative; } .page-footer { padding: 0; margin: 20px 0 0; border: 0; border-radius: 0; color: white; text-align: center; background-color: #1f1f1f; text-align: left; height: 340px; } .view-footer + .empty { height: 120px; }高度的父元素。由于您可以控制服务器端代码，我认为至少有一个选项是可能的。

占位符版本：

<div class="page-wrapper">
  <div class="page-header">Some navigation stuff goes in here</div>
  <section class="page">
    The content goes here
    <div class="view-footer">I have no control where this appears in the html</div>
    <div class="empty"></div>
  </section>
</div>

<footer class="page-footer">Guess what this is for?</footer>

html,
body {
  height: 100%;
}
.page-header {
  color: white;
  background-color: #1f1f1f;
  height: 75px;
}
.page {
  margin: 20px 0 0;
  background-color: pink;
}
.extra-footer .page {
  padding-bottom: 120px;
}
.view-footer {
  background-color: #dcdcdc;
  border-top: 1px solid #adadad;
  margin: 20px 0 -20px 0;
  padding: 50px 0;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.page-wrapper {
  min-height: calc(100% - 340px);
  position: relative;
}
.page-footer {
  padding: 0;
  margin: 20px 0 0;
  border: 0;
  border-radius: 0;
  color: white;
  text-align: center;
  background-color: #1f1f1f;
  text-align: left;
  height: 340px;
}

修饰符类版本：

<div class="page-wrapper extra-footer">
  <div class="page-header">Some navigation stuff goes in here</div>
  <section class="page">
    The content goes here
    <div class="view-footer">I have no control where this appears in the html</div>
  </section>
</div>

<footer class="page-footer">Guess what this is for?</footer>

editorTemplate -beginLayout "MyLayout" -collapse 1;
    editorTemplate -addControl "dynamic"; <- CHECKBOX 1
    editorTemplate -addControl "useEmitterSpeed"; <- CHECKBOX 2
    editorTemplate -addControl "Initial_speed";
    editorTemplate -addControl "relative";
editorTemplate -endLayout;

页脚的CSS问题

3 个答案: