网页固定底部footer

一、使用flex布局

 

.g-container{

height: 100vh;

display: flex;

flex-direction: column;

}

 

.g-footer{

margin-top: auto;

flex-shrink: 0;

height: 30px;

background: yellowgreen;

}

 

二、不使用flex布局

布局同上

.g-container {
    width: 100%;
    min-height: 100%;
    margin-bottom: -30px;
}

 

.g-footer {
    height: 30px;
    background: deeppink;
}