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; –
你是什麼意思的粘腳?你想讓它看起來像一個粘滯便箋嗎? –