解决Web开发HTML页面中footer保持在页面底部问题

解决Web开发HTML页面中footer保持在页面底部问题

如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案。

attachments-2019-04-QhlIVJr45cc5114d605b5.png

第一种方案:

footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)
思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留(padding-bottom)footer的高度。

HTML

<div class="wrapper">
    <div class="header">头部div>
    <div class="main">内容div>
    <div class="footer">底部div>
div>

CSS

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
.wrapper{
    /*保证footer是相对于container位置绝对定位*/
    position:relative;  
    width:100%;
    min-height:100%; 
    /*设置padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;*/  
    padding-bottom: 100px;  
    box-sizing: border-box;
}
.header{
    width: 100%;
    height: 200px;
    background: #999;
}
.main{
    width: 100%;
    height: 200px;
    background: orange;
}
.footer{
    width: 100%;
    height:100px;   /* footer的高度一定要是固定值*/ 
    position:absolute;
    bottom:0px;
    left:0px;
    background: #333;
}

如果在main区域设置了浮动啥的你会发现footer固定在页面可视区的底部,且覆盖在内容上,这时候只要在footer的父元素样式上增加(overflow : hidden;)即可;

第二种方案:

采用 flexbox布局模型 
思路:我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, (默认是行,也就是横向布局);同时,将html 和 body 元素的高度设置为100%,使其充满整个屏幕。 
HTML

<div class="wrapper">
    <div class="header">头部div>
    <div class="main">内容div>
    <div class="footer">底部div>
div>

CSS
我们需要调整各个区域占用的页面空间,我们将通过flex 属性来达到这一目的,该属性实际包含了三个属性,分别是: 
(1)flex-grow:元素在同一容器中对可分配空间的分配比率,及扩展比率; 
(2)flex-shrink:如果空间不足,元素的收缩比率; 
(3)flex-basis:元素的伸缩基准值;

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
.wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header{
    background: #999;
    flex: 0 0 auto;
}
.main{
    background: orange;
    flex: 1 0 auto;
}
.footer{
    background: #333;
    flex: 0 0 auto;
}




  • 发表于 2019-04-28 10:36
  • 阅读 ( 951 )
  • 分类:Web前端

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
不写代码的码农
admin

专业的程序猿

14 篇文章

作家榜 »

  1. admin 14 文章
  2. 程柒 0 文章
  3. cdw36074 0 文章
  4. uxvlucile21933822277 0 文章
  5. aaddcc 0 文章
  6. Love 0 文章
  7. Benniediava 0 文章
  8. JamesgaumS 0 文章

站点公告

本站发布的所有资源仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持正版!

如侵犯到您的权益,请及时通知我们,我们会及时处理,对小掌部落有任何投诉或建议,请与管理员联系

管理员邮箱: blooocn@163.com

联系我们

公众号:小掌部落

小编QQ:598198918(同微信)

官方Q群:849254735

知识星球:小掌部落

Email:blooocn@163.com