html 设置页脚div一直在页面底部
生活随笔
收集整理的這篇文章主要介紹了
html 设置页脚div一直在页面底部
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先上代碼
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="page-header-fixed page-sidebar-closed-hide-logo page-sidebar-closed-hide-logo" >
<div class="page-header navbar navbar-fixed-top">
//這部分的div的 position 是 fixed </div>
<div>
<div class="page-container"></div>
<div class="page-footer"></div>
</div>
</body>
</html>
解析：
1、先設置<html>的 height 為 100%；
2、設置 body 的position 為 absolute，因為它里面的 div 有一個為 fixed，這樣可以使得 body 的范圍可以包括該div，如果設置為 relatve，則不包括該div。再設置 min-height 為 100%，使其最小高度也為 html 的 height；
3、讓內容 div 和頁腳 div 都包含在同一個外部 div 中，這樣頁腳在窗口縮小時不會上浮到內容 div 的位置。
4、外部 div 的 position 設置為 absolute，是由于 body 也為 absolute 的緣故，并設置其 min-height 為 100%，這樣可以使其高度最小為 body 的高度，height 為 auto，則使其可以任意改變。
5、頁腳 div 的 position 設置為 absolute，bottom 為 0，是為了絕對定位，讓其居于頁面底部。
總結
以上是生活随笔為你收集整理的html 设置页脚div一直在页面底部的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： printf家族探秘
- 下一篇： 使用os.mknod创建文件并授权