页面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;