2. 程式人生 > >八種方法實現CSS頁面底部固定

八種方法實現CSS頁面底部固定

阿新 • • 發佈：2019-01-08

當我們在寫頁面時經常會遇到頁面內容少的時候，footer會戳在頁面中間或什麼？反正就是不在最底部顯示，反正就是很難看，下面要講的佈局就是解決如何使元素粘住瀏覽器底部，

方法一：footer高度固定+絕對定位

html

<div class="dui-container">
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</div>

CSS

.dui-container{
position: relative
 
;
min-height: 100%;
}
main {
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}

 

檢視效果

方法二：在主體content上的下邊距增加一個負值等於底部高度

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer
 
>

CSS

html, body {
height: 100%;
}
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
margin-top: -100px;
margin-bottom: -100px;
}
header, footer{
line-height: 100px;
height: 100px;
}

 

檢視效果

方法三：將頁尾的margin-top設為負數

html

<header>Header</header>
<main>Content</
 
main>
<footer>Footer</footer>

 

CSS

main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}

 

檢視效果

方法四： 通過設定flex，將footer的margin-top設定為auto

html

<body>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</body>

 

CSS

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}

 

檢視效果

方法五： 通過函式calc()計算內容的高度

html程式碼

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

 

CSS程式碼

main{
min-height: calc(100vh - 200px); /* 這個200px是header和footer的高度 */
}
header,footer{
height: 100px;
line-height: 100px;
}

 

檢視效果

方法六： 通過設定flexbox，將主體main設定為flex

html

<body>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</body>

 

CSS程式碼

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
flex: 1
}

 

檢視效果

方法七： 使用grid佈局

Html程式碼

<body>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</body>

 

CSS程式碼

html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.footer {
grid-row-start: 3;
grid-row-end: 4;
}

 

檢視效果

方法八： display-*

html

<body>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</body>

 

CSS

body {
  min-height: 100%;
  display: table;
  width: 100%;
}
main {
  display: table-row;
  height: 100%;
}

 

檢視效果

相關推薦

八種方法實現CSS頁面底部固定

當我們在寫頁面時經常會遇到頁面內容少的時候，footer會戳在頁面中間或什麼？反正就是不在最底部顯示，反正就是很難看，下面要講的佈局就是解決如何使元素粘住瀏覽器底部， 方法一：footer高度固定+絕對定位 html <div class="dui-container"> <he

CSS頁面底部固定的6種方法，你確定不想學？

當我們在寫頁面時經常會遇到頁面內容少的時候，footer會戳在頁面中間或什麼？反正就是不在最底部顯示，反正就是很難看，下面要講的佈局就是解決如何使元素粘住瀏覽器底部， 方法一：footer高度固定+絕對定位 html <div class="dui-container"> <hea

三種方式實現Android頁面底部導航欄

我們在Android手機上使用新浪微博和QQ等一些軟體時，經常會遇到類似下面這種頁面底部導航欄的控制元件，使用這種導航欄可以在手機螢幕的一頁中顯示儘可能多的內容，如下圖所示： 下面我將實現這種導航欄的三種方法總結如下： 一、使用TabHost實現（TabHost在新版的A

3種方法實現CSS隱藏滾動條並可以滾動內容

原文連結：http://caibaojian.com/hide-scrollbar.html 隱藏滾動條的同時還需要支援滾動，我

用OpenCV實現目標追蹤的八種方法（轉）

原文地址：http://m.elecfans.com/article/722414.html 編者按：目標跟蹤作為機器學習的一個重要分支，加之其在日常生活、軍事行動中的廣泛應用，很多國內外學者都對此頗有研究。本文將討論OpenCV上八種不同的目標追蹤演算法。

CSS 隱藏元素的八種方法

前言 總括： 本文詳細講述了在網頁中用CSS隱藏元素的七種方法。 念念不忘,必有迴響;有一口氣,點一盞燈。 正文 說起隱藏元素我想每一個前端er都能說起幾種，但能說全的我想就不是很多了。博主總結了幾種隱藏元素的方法，總結如下： overflow:hidden op

CSS清除浮動的八種方法

浮動對頁面的影響 如果一個父盒子中有一個子盒子，並且父盒子沒有設定高，子盒子在父盒子中進行了浮動，那麼將來父盒子的高度為0。 由於父盒子的高度為0，下面的元素會自動補位，所以這個時候要進行浮動的清除。 清除浮動的方法 1.父級div定義

跨域問題相關知識詳解（原生js和jquery兩種方法實現jsonp跨域）

syn con 加載 developer 兩種方法 ray exe 編寫 分組 1、同源策略 同源策略（Same origin policy），它是由Netscape提出的一個著名的安全策略。同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽

數據庫優化的八種方法

pro 狀態 速度 ant 數據庫完整性 text alter 註意 數據庫服務器 註:此文復制而來,只為便於學習! 1、選取最適用的字段屬性 MySQL可以很好的支持大數據量的存取，但是一般說來，數據庫中的表越小，在它上面執行的查詢也就會越快。因此，在創建表的時候，為了獲

aNDROID兩種方法實現MENU

music win pup andro com 兩種方法 hao123 popu oid pOpUpWINDOW%E6%98%BE%E7%A4%BA%E7%9A%84%E9%97%AE%E9%A2%98 http://music.hao123.com/songlist/4

淺談兩種方法實現瀏覽器內多個標簽頁之間的通信

tools view -s data- oca microsoft oar art set 調用localstorge、cookies等本地存儲方式。 方法一： localstorge在一個標簽頁裏被添加、修改或刪除時，都會觸發一個storage事件，通過在另一個標簽頁裏監

兩種方法實現Python二分查找算法

進行 n) == bsp highlight log range pre arr 一. arr=[1,3,6,9,10,20,30] def findnumber(l,h,number): mid=(l+h)//2 if arr[mid]==number:

SA：T1編寫主函數法和T2Matlab自帶的SA工具箱GUI法，兩種方法實現對二元函數優化求解——Jason niu

lin plot itl 最優解 IT 主函數 alt 圖片 gui %SA：T1法利用Matlab編寫主函數實現對定義域[-5,5]上的二元函數求最優解—Jason niu [x,y] = meshgrid(-5:0.1:5,-5:0.1:5); z = x.^2 +

兩種方法實現Linux不活動用戶登錄超時後自動登出

https linux ted 一段 ali blog fig home 服務 在平常的工作中，windows系統使用的比較多一些，身邊的很多同事都會對自己的電腦進行一些個性化設置，比如離開一段時間後自動鎖屏、自動關閉屏幕、自動註銷當前登錄等。在windows下可以這樣操作

HTTP/1.1協議中共定義了八種方法

有時 .post req 區別 extension .get trace 的區別 AC HTTP/1.1協議中共定義了八種方法（有時也叫“動作”）來表明Request-URI指定的資源的不同操作方式： 　1.OPTIONS　　 返回服務器針對特定資源所支持的HTTP請求方法

簡單的實現圖片預覽, 通過原生ajax以及 jQuery兩種方法實現圖片預覽,有更好的辦法可以留言喔................

XML HP OS image end php代碼 append sda ext 1.原生寫ajax實現圖片預覽: 　　結構: 　　　　<input type="file"> 　　　　　　<img src="" > JavaScri

selenium定位元素的八種方法

order 邏輯運算 百度一 運算符 唯一標識 drive () cto gettext web driver提供了八種元素定位的方法： id,　　name,　　class name,　　tag name, link text,　　partial link text,　　x

5種方法實現數組去重

RR 字符串 字符 ++ font i++ div sof n) 最簡單的思路，先創建一個新數組作為容器，遍歷原數組，判斷每一項在新數組中是否存在，若不存在則把這一項push到新數組中，若存在則忽略。 var arr = [1, 2, 3, 2, 4, 1]; var

三種方法實現整型數值交換

int 異或 交換 實現 整型 數值交換 臨時 變量 a+b 臨時變量法： int a = 5; int b = 4; int temp = 0; temp = a; a = b; b = temp; 異或法： int a = 5; int b = 6; a = a^b;

刪除鏈表的倒數第N個節點（三種方法實現）

from ++ n+1 while end != bsp -- 結點 刪除鏈表的倒數第N個節點 給定一個鏈表，刪除鏈表的倒數第 n 個節點，並且返回鏈表的頭結點。 示例： 給定一個鏈表: 1->2->3->4->5, 和 n = 2. 當刪