html footer置底部
codepen演示地址:https://codepen.io/chriscoyier/pen/uwJjr
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
* {
margin: 0;
}
html, body {
// 先把html撐開
height: 100%;
}
.page-wrap {
min-height: 100%;
/* 相當於底部的高度 */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
相關文章
- HTML+CSS底部footer兩種固定方式HTMLCSS
- HTML <footer> 標籤HTML
- footer.html中中文亂碼的解決HTML
- 如何讓html引用公共佈局(多個html檔案公用一個header.html和footer.html)HTMLHeader
- stick footer佈局
- 去除UITableViewheader footer黏性UIViewHeader
- 影片直播app原始碼,CSS div水平垂直居中和div置於底部APP原始碼CSS
- CSS實現footer“吸底”效果CSS
- 直播app開發搭建,載入Html片段監聽滑動到底部APPHTML
- WordPress模板層次08:footer.phpPHP
- 隱藏JqueryMobile中的Header與FooterjQueryHeader
- [thymeleaf]springboot整合thymeleaf, html使用預置方法Spring BootHTML
- “粘連”footer佈局的思考和總結
- CSS經典佈局之Sticky footer佈局CSS
- UI介面微信底部(ViewPager實現Tab,左右滑動+底部點選)UIViewpager
- getScrollHeight到達底部
- 仿IOS底部彈框iOS
- Android 底部導航欄 (底部 Tab) 最佳實踐|掘金技術徵文Android
- 直播app系統原始碼,底部彈框顯示,底部導航隱藏APP原始碼
- Flutter 底部導航詳解Flutter
- 微信小程式的底部使用微信小程式
- 元素滾到到底部原理
- easyui 表格底部加合計UI
- 微信小程式--》tabBar底部欄微信小程式tabBar
- ICP備案底部程式碼
- gulp使用gulp-file-include將header/footer引入頁面Header
- 【譯】8個有用的 CSS 技巧:視差影象,sticky footer 等等CSS
- 頁面沒有出現滾動條時底部懸浮顯示到最底部
- HTML+CSS編寫靜態網站-36 裝置適配概述HTMLCSS網站
- SAP Commerce Cloud Spartacus UI footer 區域的設計模型CloudUI模型
- 怎樣取得DBGridEh的footer中的欄位合計值IDE
- 結構化語句header nav aside main article section footerHeaderIDEAI
- JavaScript 點選按鈕返回底部JavaScript
- laravel-admin 更換底部Laravel
- CSS文字沉到元素的底部CSS
- CSS去掉圖片底部的空白CSS
- 元素在div中底部顯示
- 一個div滾動到底部