flex实现吸底导航

我们经常会遇到这样的问题：如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本篇文章就来介绍一下。非常具有实用价值，需要的朋友可以参考下

我们经常会遇到这样的问题：如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文有两种理解：

一、是无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是可滚动的。
二、是当内容区的内容较少时，页脚区不是随着内容区排布，而是始终显示在屏幕的最下方；当内容区的内容较多时，页脚能随着文档流撑开，始终显示在页面的最底部。

<div class="div-body">
    <div class="div-main">
    //主体内容
    </div>
    <div class="div-footer">
    //底部导航内容

    </div>
</div>

.div-body {
		box-sizing: border-box;
		min-height: 100%;
		padding-bottom: 60px;
	}

	.div-footer {
		position: fixed;
		bottom: 0%;
		left: 0;
		right: 0;
		height: 60px;
		background-color: #1F9FD6;
		box-shadow: 15px 5px 10px 2px #555;
	}