如何创建固定页脚，其中主要内容可见，额外内容隐藏在下面，只有在使用css滚动到底部后才可见
如何创建固定页脚，其中主要内容可见，额外内容隐藏在下面，只有在使用css滚动到底部后才可见
提问于 2018-06-13 03:12:25
如何创建一个页脚，主要内容始终可见固定底部和额外的内容隐藏在下面，只有滚动到底部后才可见。使用css。
<html>
<head>
</head>
<body>
<header></header>
<main></main>
<footer>
primary content - this should be visible always (fixed) [copyright, logo etc.]
...
extra content - initially hidden this should be visible only when scrolled to bottom [extra links, careers link, policies link etc.]
</footer>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2018-06-13 03:49:45
如果你想要一个只有CSS/HTML的解决方案(没有JavaScript)，那么你可以使用position:sticky。为此，您必须在main元素的末尾插入希望始终显示在底部的段落：
<html>
<head>
<style>
body{
margin:0
}
#alwayshow{
position:sticky;
bottom:0;
display:block;
background:#000;
color:#fff;
padding:2px;
}
</style>
</head>
<body>
<header></header>
<main>
<div>
content goes here ...
</div>
<div id="alwayshow">primary content - this should be visible always (fixed) [copyright, logo etc.]</div>
</main>
<footer>
extra content - initially hidden this should be visible only when scrolled to bottom [extra links, careers link, policies link etc.]
</footer>
</body>
</html>请注意，粘性位置相对较新。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50824262
复制相关文章
相似问题