css將元素固定於網頁底部
本章節介紹一下如何讓一個div元素固定於網頁的底部。
這種效果具有兩種情況,一種是隨著滾動條滾動,另一種情況是不隨著滾動條滾動。
下面分別通過程式碼例項介紹一下:
例項程式碼:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html,body{ margin:0px; padding:0px; height:1000px; width:100%; } #footer{ height:30px; background:#CCC; position:fixed; bottom:0px; width:100%; text-align:center; font-size:12px; line-height:30px; } </style> </head> <body> <div id="footer">螞蟻部落歡迎您,只有努力才會有美好的明天。</div> </body> </html>
上面的程式碼可以將div元素固定於網頁的底部,不會隨著滾動條的滾動而變化。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html,body{ margin:0px; padding:0px; height:1000px; width:100%; } #footer{ height:30px; background:#CCC; position:absolute; bottom:0px; width:100%; text-align:center; font-size:12px; line-height:30px; } </style> </head> <body> <div id="footer">螞蟻部落歡迎您,只有努力才會有美好的明天。</div> </body> </html>
上面的程式碼雖然也可以將div定位於網頁的底部,但是div塊會隨著滾動條滾動。
相關文章
- css將div固定在網頁底部程式碼例項CSS網頁
- 純css實現固定在網頁底部選單導航CSS網頁
- css 如何把元素固定在容器底部?(四種方式)CSS
- 將div元素固定於頁面指定位置程式碼例項
- css fixed視窗底部固定定位CSS
- HTML+CSS底部footer兩種固定方式HTMLCSS
- CSS文字沉到元素的底部CSS
- CSS實現div固定於網頁右下角例項程式碼CSS網頁
- css元素位置固定程式碼例項CSS
- html css 如何將表頭固定HTMLCSS
- CSS+DIV讓頁尾始終底部CSS
- css3網頁底部漸隱漸現的箭頭效果CSSS3網頁
- JavaScript彈性固定於網頁右側詳解JavaScript網頁
- Sticky footers,元素一直在頁面底部
- css讓文字位於div的底部CSS
- weex踩坑之底部元素固定懸浮,其他內容滑動瀏覽
- CSS如何讓文字居於div的底部CSS
- CSS+DIV讓頁尾始終保持在頁面底部CSS
- 網頁固定側欄的做法網頁
- 底部按鈕固定方案(移動端)
- CSS應用給網頁元素的幾種方式總結CSS網頁
- 網頁底部版權資訊如何註明?網頁
- javascript如何使網頁如何回到底部JavaScript網頁
- 固定一個div在瀏覽器底部瀏覽器
- div-固定在頁面中間,不被其他元素覆蓋
- 元素滾到到底部原理
- 元素的固定定位
- 將span元素設定為固定寬度和高度程式碼
- 高效能web建站規則(將js放在頁面底部)WebJS
- 元素在div中底部顯示
- js操作網頁中的元素JS網頁
- 用 CSS 隱藏頁面元素的 5 種方法CSS
- 公司官網建站筆記(六):域名進行公安備案並將備案號顯示在網頁底部筆記網頁
- CSS去掉圖片底部的空白CSS
- CSS網頁文字分欄CSS網頁
- 網頁元素居中的n種方法網頁
- 將資料存放於html元素或者從html元素刪除HTML
- 子元素固定寬度 父元素寬度被撐開