你的位置:首页 > 软件开发 > 网页设计 > 将 footer 固定在浏览器底部

将 footer 固定在浏览器底部

发布时间:2017-09-11 21:00:08
在内容超出屏幕时,footer只有在滚动条拉直底部时才出现。当撑不满屏幕时,footer直接固定在底部。主体区域 min-height:100%, 恰好把 footer 挤出一屏外,footer 本身使用负的 margin-top 往上提与 height 相同的距离,这时只需在主 ...

在内容超出屏幕时,footer只有在滚动条拉直底部时才出现。当撑不满屏幕时,footer直接固定在底部。

主体区域 min-height:100%, 恰好把 footer 挤出一屏外,footer 本身使用负的 margin-top 往上提与 height 相同的距离,这时只需在主体区内部元素上添加 padding-bottom 把 footer 盖住的区域排开即可。

html:

将 footer 固定在浏览器底部将 footer 固定在浏览器底部
<!DOCTYPE HTML><html lang="en"> <head> <script id="jquery_182" type="text/javascript" class="library" src='/images/loading.gif' data-original="http://www.cnblogs.com//js/sandbox/jquery/jquery-1.8.2.min.js"></script> </head> <body>  <div class="wrapper">   <div class="header">header</div>   <div class="main">     <button id="add">add</button>     <p>test test test</p>   </div>  </div>  <div class="footer">footer</div> </body></html>
View Code

 

css:

将 footer 固定在浏览器底部将 footer 固定在浏览器底部
html{ height:100%;}body{ height: 100%; margin: 0; background: white;}.wrapper{ min-height:100%; height:auto;}.main{ padding-bottom: 60px;}.footer,.header{ color: white; text-align:center; height: 60px; line-height:60px; background:#376AAE;}.footer{ margin-top:-60px;}p{ margin:0; padding:10px; background:white;}
View Code

 

js:

将 footer 固定在浏览器底部将 footer 固定在浏览器底部
$(function(){ $("#add").click(function(){  $(".main").append('<p>test test test</p>'); });})
View Code

 

其实使用 css3 calc 的话,可以很简单地将vh和绝对单位混算,DOM结构就无需如此别扭了,直接 min-height: calc(100vh - 60px); 就好了

将 footer 固定在浏览器底部将 footer 固定在浏览器底部
body{ margin: 0; background: white;}.main{ min-height:calc(100vh - 120px);}.footer,.header{ color: white; text-align:center; height: 60px; line-height:60px; background:#376AAE;}p{ margin:0; padding:10px; background:white;}
View Code

 

原标题:将 footer 固定在浏览器底部

关键词:浏览器

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。