試圖頁腳移至底部

html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background-color: #23395b; 
 
} 
 

 
footer{ 
 
    background-color: #012a36; 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: -300px; 
 
    margin-top: -200px; 
 
    height: 80px; 
 
    clear:both; 
 
    padding-top:5px; 
 
    padding-bottom: 5px; 
 
     } 
 

 
footer ul{ 
 
    text-align: center; 
 
    padding-top: 2%; 
 
    
 
} 
 

 
footer li{ 
 
    list-style: none; 
 
    display: inline; 
 
    padding: 2%; 
 
} 
 

 
footer a{ 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
footer a:hover{ 
 
    color: #00cecb; 
 
    text-decoration: none; 
 
}

<footer class="footer"> 
 

 
    <ul> 
 
     <li><a href="index.html">HOME</a></li> 
 
     <li><a href="index.html">HOW IT WORKS</a></li> 
 
     <li><a href="index.html">CONTACT</a></li> 
 
     <li><a href="index.html">HELP</a></li> 
 
    </ul>  
 
     
 
</footer>

試圖頁腳移動到頁面的底部。我已將絕對位置添加到位置，但當更改底部測量值時，body/html已增加。我添加了div id = wrap，但它的外觀仍然相同，在頁腳之後會留下大量空間。

來源

2016-03-06 Alzira Barretto

-1

瑞安既成事實的Stick Footer：

* { 
    margin: 0; 
} 

html, 
body { 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    margin: 0 auto -80px; 
    /* the bottom margin is the negative value of the footer's height */ 
} 

footer, 
.push { 
    height: 80px; 
    /* '.push' must be the same height as 'footer' */ 
}

注：你必須去除腳部構件

jsFiddle

來源

2016-03-06 04:27:03 symlink

沒有工作。我嘗試根據你的方法 –

你是否刪除了'position：absolute'和'margin-top：-200px'這樣的額外樣式規則？爲了使它起作用，你必須用我的小提琴替換你發佈的所有CSS。 – symlink

我刪除了位置和邊距，並將其全部替換，但看起來相同。 –

-1

製作位置在頂部和底部填充：相對身體和底部：0爲頁腳。從頁腳中刪除頁邊距。

來源

2016-03-06 05:56:04 Bogdan

試圖頁腳移至底部

回答

相關問題