Question

必须坚持到网页的底部，直到之后才能看到用户到达页面底部

例如

HTML

<footer>
    This is a footer.
</footer>

CSS

footer {
  padding: 10px;
  background-color: #999999;
  color: white;
  text-align: right;
  bottom: 0;
  width: 96.75%;
  position: fixed;
}

问题是，当用户没有到达页面底部时，它仍然可见。我想要它，直到它们触底才能看到它。

Answer 1

您可以使用javascript ...

window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
        document.getElementsByTagName("footer")[0].style.visibility = 'visible';
    }else{
	document.getElementsByTagName("footer")[0].style.visibility = 'hidden';
    }
};

body {
	position: relative;
	height:1000px; /*only for example to having scroll */ 

}
footer {
  visibility:hidden;
  padding: 10px;
  background-color: #999999;
  color: white;
  text-align: right;
  bottom: 0;
  width: 96.75%;
  position: fixed;
}

<footer> the footer</footer>

Answer 2

您可以使用many techniques，大部分都不涉及JavaScript。有些依赖于尚未在所有浏览器中实现的更现代的CSS功能（如网格）。

这是一个简单，相当健壮的跨浏览器示例。它涉及为body和HTML提供100％的高度并使用负边距。

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
footer.sticky {
  height: 50px;
  margin-top: -50px;
  background-color:#efefef;
}

＆＃13;

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="sticky">
  <p>some footer content</p>
  </footer>
</body>

＆＃13;

内容越多，页脚就会被按下

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
footer.sticky {
  height: 50px;
  margin-top: -50px;
  background-color:#efefef;
}

＆＃13;

<body>
  <div class="content">
    <div class="content-inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <footer class="sticky">
  <p>some footer content</p>
  </footer>
</body>

＆＃13;

HTML / CSS页脚必须粘贴到网页的底部，在用户到达页面底部之前不应该可见

2 个答案: