Question

好吧，我这里有CSS问题。我最初的问题是CSS/html - make footer ONLY visible after scroll? stick to bottom just below visible page area?，我用这个html在一个页面上实现了我想要的效果：

<div class="wrapper">
  <h1 class="headertext">Welcome back.</h1>
</div>
<div class="footer">Footer</div>

和CSS：

* {
  margin: 0;
}

html, body {
  height: 100%;
}

.wrapper {
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  min-height: calc(100% + 142px);
  margin-bottom: -142px;
}

.wrapper:after {
  display: block;
  content: "";
  height: 142px;
}

.footer {
  background-color: white;
  opacity: 0.5;
  height: 142px;
  text-align: center;
}

问题在于：

* {
      margin: 0;
    }

    html, body {
      height: 100%;
    }

允许这个工作已经搞砸了（真的搞砸了）我网站上的每个其他页面，而且，这些页面上的页脚没有相同的效果。我正在寻找一种更简单的方法将页脚粘贴到绝对底部（刚好超过页面内容）只需使用类选择器，即没有html，body或*。

我已经尝试将height: 100%和margin: 0放在包装器和页脚中，因为它们适用于所有人，但我的页脚仍然停留在页面顶部或根本看不到。

目前正在与CSS合作：

.wrapper:after {

 height: 100%;
  height: 89px;
}

.wrapper {
     margin-bottom: -89px;
    background: #50a3a2;
    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
    position: absolute;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: calc(100% + 89px);
    margin-top: 0px;

    z-index: -1;
    text-align: center;
}
.footer{

    position: absolute;
    bottom: 0px;
height: 89px;
    background-color: rgba(255, 255, 255, 0.7);
    opacity: 0.8;
    text-align: center;
    z-index: -3;
    color: white;
}

有没有办法实现这个目标？再说一遍，我不想要一个固定的页脚，我想要它只是不管页面内容的数量是否只是低于内容。我在这里绝望 - 目前有一个破碎的网站

Answer 1

这对你有用吗？

这是完全动态的解决方案，其中wrapper占用footer留下的剩余空间。

＆＃13;

html, body {
  margin: 0;
}
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrapper {
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  flex: 1;
  padding: 10px;
}
.footer {
  background-color: white;
  opacity: 0.5;
  padding: 10px;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <h1 class="headertext">Welcome back.</h1>
  </div>
  <div class="footer">Footer</div>
</div>

＆＃13;

如果您无法使用html, body { margin: 0; }，则另一个选项是使用绝对定位。

＆＃13;

.container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.wrapper {
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  flex: 1;
  padding: 10px;
}
.footer {
  background-color: white;
  opacity: 0.5;
  padding: 10px;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <h1 class="headertext">Welcome back.</h1>
  </div>
  <div class="footer">Footer</div>
</div>

＆＃13;

如果您不能使用flex，请使用display: table，它对于粘性footer具有相同的动态功能，但您需要额外的包装作为行

＆＃13;

html,
body {
  margin: 0;
}
.container {
  min-height: 100vh;
  display: table;
  width: 100%;
}
.row {
  display: table-row;
  height: 100%;
}
.row ~ .row {
  height: 1px;
}
.wrapper {
  display: table-cell;
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  padding: 10px;
}
.footer {
  display: table-cell;
  background-color: white;
  opacity: 0.5;
  padding: 10px;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="wrapper">
      <h1 class="headertext">Welcome back.</h1>
    </div>
  </div>
  <div class="row">
    <div class="footer">Footer</div>
  </div>
</div>

＆＃13;

Answer 2

您可以尝试在此处使用flexbox技巧。 JSFiddle

CSS：

BODY {
    display: flex;
    display: flexbox;
    height: 100vh;
   -ms-flex-direction: column;
   flex-direction: column;
}

.wrapper {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

如果您不想使用Body选择器，可以向min-height: 100vh;添加.wrapper，将其最小高度定义为视口的100％。

.wrapper {
    min-height: 100vh;
}

即使在IE10中也能正常使用。

HTH。

Answer 3

这将是我的方法：https://jsfiddle.net/Ltj0o802/

$("#add").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus.</p>").insertAfter("#add");
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  position: relative;
  min-height: 100%;
  background: gray;
}
.headertext {
  margin-top: 0;
}
.content {
  padding-bottom: 50px;
}
.footer {
  background: red;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="content">
    <h1 class="headertext">Welcome back.</h1>
    <p>
      <button id="add">Add Content</button>
    </p>
  </div>
  <div class="footer">
    Footer
  </div>
</div>

CSS-stick页脚到页面底部（滚动后只能看到）没有html选择器？

3 个答案: