頁面footer在底部

時間 2019-12-09

標籤頁面 footer 底部简体版

原文原文鏈接

頁腳動態貼在底部須要知足如下兩個條件：css

當主體的內容高度不超過可視區域高度的時候，頁腳貼在頁面底部。
當主體的內容高度超過可視區域高度的時候，頁腳將按正常佈局。

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

<body> <header>header</header> <main>content</main> <footer>footer</footer> </body>

html{height:100%;} body{min-height:100%;margin:0;padding:0;position:relative;} header{background-color: #ffe4c4;} main{padding-bottom:100px;background-color: #bdb76b;} footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}

方法二：footer高度固定+margin負值

<body> <div class="container"> <header>header</header> <main>main content</main> </div> <footer>footer</footer> </body>

html,body{height:100%;margin:0;padding:0;} .container{min-height:100%;} header{background-color: #ffe4c4;} main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等於或大於footer的height值 */ footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}

方法三：css table實現的聖盃佈局


<div class="wrapper">
 <div class="header">頭部</div>
 <div class="main">
 <div class="box sidebar">左側欄</div>
 <div class="box content">主體內容</div>
 <div class="box sidebar">有側欄</div>
 </div>
 <div class="footer">頁腳底部</div>
</div>body {

 background: @beige;
 color: black;
}

.wrapper {
 height: 100%;
 display: table;
 width: 100%;
 text-align: center;
}

.header {
 display: table-row;
 height: 1px;
 background: @yellow;
}

.main {
 height: 100%;
 display: table;
 width: 100%;
}

.box {
 display: table-cell;
}

.sidebar {
 width: 100px;
 background: @orange;
}

.footer {
 display: table-row;
 height:1px;
 background: @green;
 color: @beige;
}

@orange: #BD4932;
@yellow: #FFD34E;
@green: #105B63;
@beige: #FFFAD5;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。