标签：color cti 样式 实现 必须 显示 content 内容 屏幕高度
sticky footer绝对底部：当页面内容小于屏幕高度时，底部模块固定显示在屏幕底部；当页面内容大于屏幕高度时，底部模块会被推到内容底部，拖动滚动条才能显示。
1、min-height
页面结构为：
1 <div class="minHeight"> 2 <div class="wrapper"> 3 <div class="content"> 4 <p>内容</p> 5 </div> 6 </div> 7 <div class="footer">底部模块</div> 8 </div>
样式：设置wrapper最小高度为屏幕高度，footer设置负的上边距固定在底部，当内容较长时，可能会向下与footer产生混叠，因此必须设置content的下padding，保证不重合。
<style type="text/css"> .wrapper{ min-height: 100%; } .content{ padding-bottom: 50px; } .footer{ position: relative; margin-top: -50px; } </style>
2、flex布局
1 <div class="box"> 2 <div class="content"> 3 <p>内容</p> 4 </div> 5 <div class="footer">底部模块</div> 6 </div>
1 <style type="text/css"> 2 .box{ 3 display: flex; 4 flex-direction: column; 5 } 6 .content{flex:1} 7 </style>
标签：color cti 样式 实现 必须 显示 content 内容 屏幕高度
原文地址：https://www.cnblogs.com/i-Leo/p/9550141.html
