标签：flex footer 100% bottom height HTML background 页面
页面内容太少，无法将内容区域撑开，从而在 footer 下面留下一大块空白；但是我们又希望footer能在窗口最底端。两种方法来解决这个问题：
方法一：footer高度固定+绝对定位
思路：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom：0），父层内要预留（padding-bottom）footer的高度。
HTML代码：
<div id="container">
<header>HEADER</header>
<section class="main">MAIN</section >
<footer>FOOTER</footer>
</div>
CSS代码：
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#container{
/*保证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 id="container">
<header>HEADER</header>
<section class="main">MAIN</section>
<footer>FOOTER</footer>
</div>
CSS代码：
我们需要调整各个区域占用的页面空间，我们将通过flex 属性来达到这一目的，该属性实际包含了三个属性，分别是：
（1）flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率；
（2）flex-shrink：如果空间不足，元素的收缩比率；
（3）flex-basis：元素的伸缩基准值；
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#container{
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;
}
————————————————
标签：flex,footer,100%,bottom,height,HTML,background,页面 来源： https://www.cnblogs.com/zwfbokeyuan/p/15724277.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。