我的HTML頁腳不會向下移動

-2

我一直試圖讓頁腳移動到右下角。它目前是唯一一個在我調整瀏覽器大小時不會全部移動的頁面，更不用說頁面底部或右側。我是HTML新手，主要是做爲數據科學項目的輸出。這裏是我的代碼：我的HTML頁腳不會向下移動

<!DOCTYPE html> 
 
<html lang="en"> 
 
    
 

 

 
<style> 
 
html { 
 
    background: url("https://lh3.ggpht.com/TOsicwUVM6bKoB1_u_5noea0kkFAegkAdBFQcmTXhwKrN5485URcl0IWxgjldjd59A=h900") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
body { height: 100%;} 
 
#nonFooter { position: relative; min-height: 100%;} 
 
* html #nonFooter { height: 100%;} 
 
#Footer { position: relative; margin-top: -7.5em; } 
 

 
</style> 
 

 
<body> 
 
    
 
    <div class="page-wrap"> 
 
     <div class="header"> 
 
      <h3 style ="color:#FFFFFF" class="text-muted">Headerthing</h3> 
 
     </div> 
 
    
 
     <div> 
 
      <h1 align="center" style ="color:#FFFFFF">Predict tool</h1> 
 
      <p class="lead"></p> 
 
     </div> 
 
     <div style ="width: 300px; margin: 130px auto 0 auto; "> 
 
     <div style ="color:#FFFFFF;"> 
 
      <form action="upload.php" method="post" enctype="multipart/form-data"> 
 
    Select image to upload: 
 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
 
    <input type="submit" value="Upload Image" name="submit"> 
 
      </form> 
 

 
     <form action="/action_page.php"> 
 
    Instagram Handle:<br> 
 
    <input type="text" name="handle"><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 
     </div> 
 
     </div> 
 

 

 
</div> 
 
    
 
<footer class="site-footer"> 
 
    <p style="color:white">Founders: Charles Barkley, Hakeem the Dream and Shaqs fat ass </p> 
 
</footer> 
 

 

 
</body> 
 

 
</html>

來源

2017-03-24 DataScienceAmateur

所以你想在最底部？ –

這將是驚人的。在右邊將是一個巨大的獎金 – DataScienceAmateur

請不要在所有帽子中鍵入您的標題。這裏沒有理由要SHOUT。當你看到主頁的問題列表時，你看不到任何（除了你的）全部大寫字母，原因是a）它不會幫助你更快; b）它使文本更難以閱讀和解析;和c）這是非常粗魯和煩人的人在你身上。表現出一定的尊重和平常的禮貌，不要來到這裏和SHOUT，除了我們會來到你的辦公室或家中，並向你求助時尋求幫助。 –

您的頁腳已經在頁面的底部。通過將它向下移動，我假設您指的是默認情況下自動分配給<p>標記的邊距。您可以刪除這些，並獲得出現在絕對右下角有以下CSS文字：

.site-footer p { 
    margin: 0; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}

我創建了一個更新的小提琴展示這個here。

注意position: absolute與bottom: 0結合將使因此，如果您的頁腳將停留在可見屏幕的右下角，該元素將始終是可見的，即使你沒有滾動到其位置然而。

希望這會有所幫助！ :)

來源

2017-03-24 02:43:59

真棒但有一個問題，我在哪裏添加部分指向一個CSS文件？我已經將您的給定代碼保存爲一個名爲「mystyle.css」的文件放入同一個文件夾，我將哪些代碼片段添加到html文件中以正確指向它？再次感謝！ – DataScienceAmateur

您正在使用內部樣式表 - 只需將上述代碼嵌入您的'

我的HTML頁腳不會向下移動

回答