HTML+CSS底部footer兩種固定方式
網頁常見的底部欄(footer)目前有兩種:
一、永久固定,不管頁面的內容有多高,footer一直位於瀏覽器最底部,適合做移動端底部選單,這個比較好實現;
二、相對固定,當頁面內容高度不沾滿瀏覽器高度,footer顯示在瀏覽器底部,且不會出現滾動條,如果頁面內容高度超出瀏覽器高度,footer則相對與內容的最底部,並且自動出現滾動條;
廢話不多說,可以直接複製程式碼檢視效果
一、永久固定
<!DOCTYPE html> |
二、相對固定
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> * { margin: 0px; padding: 0px; } html, body { height: 100%; } .footer { margin-top: -50px; height: 50px; background-color: #eee; z-index: 9999; } .wrap { min-height: 100%; } .main { padding-bottom: 50px; } </style> </head> <body> <div class="wrap"> <div class="main"> 內容,可以大量複製看效果<br /> </div> </div> <div class="footer">相對在底部</div> </body> </html> |
相關文章
- css 如何把元素固定在容器底部?(四種方式)CSS
- html footer置底部HTML
- 直播平臺軟體開發,監聽WebView滑動到底部的兩種方式WebView
- 底部按鈕固定方案(移動端)
- css fixed視窗底部固定定位CSS
- css將元素固定於網頁底部CSS網頁
- Oracle兩種備份方式Oracle
- 隱藏元素兩種方式
- 微信小程式之animation底部彈窗動畫(兩種方法)微信小程式動畫
- 固定一個div在瀏覽器底部瀏覽器
- JS 垃圾回收的兩種方式JS
- Docker打包映象的兩種方式Docker
- sparkrdd轉dataframe的兩種方式Spark
- 建立ASM磁碟有兩種方式!ASM
- 提交Application的兩種方式APP
- 兩種方式配置vue全域性方法Vue
- zabbix agent 的兩種安裝方式
- HTTP代理的兩種連線方式HTTP
- 兩種方式實現輪播圖
- redis的php驅動兩種方式RedisPHP
- JavaScript 函式的兩種宣告方式JavaScript函式
- RAC時間同步的兩種方式
- SSH綜合查詢的兩種方式
- 【shell 指令碼】兩種登入方式指令碼
- easyUI 初始化的兩種方式UI
- 建立oracle dblink 的兩種方式Oracle
- oracle兩種登陸認證方式Oracle
- Native 工程整合Flutter 的兩種方式Flutter
- ubuntu建立使用者的兩種方式Ubuntu
- Java鍵盤錄入的兩種方式Java
- 兩種go傳送郵件的方式Go
- php 與 nginx 的兩種處理方式PHPNginx
- React元件方法的兩種定義方式React元件
- springboot使用webSocket的兩種方式Spring BootWeb
- java 傳遞引數的兩種方式Java
- java執行緒建立的兩種方式Java執行緒
- wpf兩種佔位符實現方式
- JVM中物件訪問定位兩種方式JVM物件