网页固定底部footer

一、使用flex布局

<div class="g-container">

<div class="g-real-box"></div>

<div class="g-footer"></div>

</div>

 

.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; }