有的时候页面内容不够撑起一个屏幕的时候，就会看起来很难看。

方式一

html

<div class="wrapper clearfix"><div class="content">// 这里是页面内容</div>  
</div>
<div class="footer">// 这里是footer的内容
</div>

css

.wrapper {min-height: 100%;
}.wrapper .content{padding-bottom: 50px; /* footer区块的高度 */
}.footer {position: relative;margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */height: 50px;clear: both;
}.clearfix::after {display: block;content: ".";height: 0;clear: both;visibility: hidden;
}

注意:content元素的padding-bottom、footer元素的高度以及footer元素的margin-top值必须要保持一致。

这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。

flex布局方式

html代码：

<div class="wrapper"><div class="content">这里是主要内容</div><div class="footer">这是页脚区块</div>  
</div>

css代码：

.wrapper {display: flex;flex-direction: column;min-height: 100vh;
}
.content {flex: 1;
}
.footer {flex: 0;
}

这种布局方式结构简单，代码量少，也是较为推荐的布局方式。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！