flex 底部固定_div 底部固定方法（不用position定位）

方法一：全局增加一个负值下边距等于底部高度

html, body {

height: 100%;

margin: 0;

}

.content {

padding: 20px;

min-height: 100%;

margin: 0 auto -50px;

}

.footer,.push {

height: 50px;

}

Sticky Footer with Negative Margin 1

Add Content

Footer

方法二：底部元素增加负值上边距

html, body {

height: 100%;

margin: 0;

}

.content {

min-height: 100%;

}

.content-inside {

padding: 20px;

padding-bottom: 50px;

}

.footer {

height: 50px;

margin-top: -50px;

}

body {

font: 16px Sans-Serif;

}

h1 {

margin: 0 0 20px 0;

}

p {

margin: 20px