網頁固定底部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;
}