如何创建一个页脚,主要内容始终可见固定底部和额外的内容隐藏在下面,只有滚动到底部后才可见。使用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>
发布于 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>
请注意,粘性位置相对较新。
https://stackoverflow.com/questions/50824262
复制相似问题