Q
如何让这个粘脚?
-1
A
回答
4
position: fixed;
并使用top,bottom,right和left属性来定位它。
位置固定将相对于视口定位元素,而不是相对于文档。
6
根据您特别需要的行为,您会希望使用position: fixed
来制作粘性页脚。
考虑下面的代码片段;
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 50px;
background-color: red;
}
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac bibendum magna. Etiam quis malesuada nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi hendrerit quam urna, tempus mattis nisi posuere ut. Praesent placerat diam metus, vitae feugiat mi pellentesque vitae. Pellentesque blandit consequat finibus. Sed porta, lacus blandit tempus tincidunt, lacus mauris lobortis ante, sed ullamcorper ligula metus eu est. Nullam finibus tortor sed est scelerisque efficitur non et arcu. Praesent ultricies, sem et gravida tincidunt, sem magna ultricies nulla, pretium tempor urna velit eu dolor. Quisque felis velit, maximus ut condimentum vel, efficitur quis dolor. Nunc porta accumsan suscipit. Integer vitae diam tortor. Nullam fermentum tortor non molestie dignissim. Pellentesque placerat turpis nec dictum semper.
</p>
<p>
Aliquam rutrum, dolor sed elementum iaculis, nunc sem venenatis metus, ut condimentum felis augue in erat. Nam cursus non dolor vel tempus. Aenean dapibus tortor vitae accumsan pellentesque. Suspendisse non erat sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis dui in arcu vestibulum egestas eget eu magna. Mauris et erat vel dolor interdum aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec justo at mauris tempus tincidunt. Ut vestibulum massa vel pharetra ullamcorper. Quisque dapibus, massa nec venenatis pellentesque, ante justo auctor nisi, quis condimentum nulla turpis ac tellus. Quisque vitae pellentesque neque, vel pharetra turpis. Nam ultrices, nisi et ornare faucibus, risus sem vulputate erat, tincidunt ultrices lacus velit id felis. Sed eu interdum nunc. Nullam ut consectetur sem. Morbi congue, ipsum sit amet molestie fermentum, metus lorem dignissim dui, non commodo dui ipsum ac felis.
</p>
<p>
In nec massa in dolor tempor posuere sit amet ac metus. Morbi venenatis mattis nunc, eget sagittis augue malesuada sed. Praesent porttitor dui laoreet lorem interdum, sed eleifend eros pellentesque. Quisque interdum turpis sed metus ornare, a condimentum elit malesuada. Cras bibendum egestas auctor. Mauris interdum laoreet dui, ut vestibulum neque vulputate congue. Nunc faucibus euismod orci, eget feugiat tellus.
</p>
</div>
<div class="footer"></div>
注::身体滚动和页脚棒。
这样可以保持页脚始终处于可见状态,这是一般粘贴时的假设。
希望能帮助你!
相关问题
- 1. 如何让magento页脚粘在底部?
- 2. 如何让这个脚本更简洁?
- 3. 如何让这个脚本使用ajax?
- 4. 如何让gradle这个
- 5. 如何让这个类
- 6. 我不能让我的页脚粘
- 7. 如何让我的页脚粘到底部?
- 8. 如何让我的包装推入粘脚
- 9. 如何让页脚粘到底部然后调整大小?
- 10. Boostrap3:如何工作粘脚?
- 11. 如何获得粘脚?
- 12. 如何使粘页脚
- 13. 如何让这个脚本具有无限循环?
- 14. 如何让这个java脚本在我的表单中运行?
- 15. 如何让这个脚本更快一点?
- 16. 如何让这个脚本只执行一次?
- 17. 如何让这个脚本运行得更快?
- 18. 如何让这个脚本在取消时实际停止?
- 19. JavaScript和CakePHP:如何让这个简单的脚本工作?
- 20. 如何让这个Python脚本在特定时间执行?
- 21. 如何让这个脚本暂停悬停?
- 22. 如何让这个SQL脚本运行得更快?
- 23. 如何让这个Python脚本与Python 3一起工作?
- 24. 如何让这个更好的递归动画jQuery脚本?
- 25. 如何让这个脚本更有效率?
- 26. 如何让这个命令行脚本在TeamCity中工作?
- 27. 如何让这个脚本在服务器上运行 - bash脚本
- 28. 如何让一个HTML元素“粘”到另一个的底部?
- 29. 如何让Qt代表编辑'粘'
- 30. 如何让Div粘贴到光标
position:fixed; –
你是什么意思的粘脚?你想让它看起来像一个粘滞便笺吗? –