在移動視圖中將頁腳保持在頁面底部

Question

我用html和css創建了一個網站。 該網站在桌面和筆記本電腦視圖中表現完美，但是當我在移動設備中測試時，頁腳的行為不正常，它不會顯示在頁面底部，而是保留在頁面底部的某個位置。 我的身體和頁腳樣式表如下：

html{
  overflow-x:hidden;
}

body {
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#303036;
  margin:0px;
  background:url('../images/main.jpg');
  background-repeat:repeat;
  min-width:1100px;
  position: relative; 
  height:100%;
}

footer {
  color: white;
  width:100%;
  padding:0;
  display:block; 
  clear:both;
  bottom:0;     
}

我是否需要進行任何更改才能使頁腳停留在移動視圖中的頁面底部？

Answer 1

您的問題與頁腳的位置值有關（默認為display: block; ）。 您可以將代碼更改為：

footer {
  color: black;
  width:100%;
  padding:0;
  clear:both;
  bottom:0;
  position: absolute; //change here   
}

還有其他方法可以確保你獲得正確的身高：

html{
  overflow-x:hidden;
  height: 100%;
}

Answer 2

在你的CSS中，“bottom”屬性現在沒有為頁腳做任何事情。 您需要為此添加“位置”屬性才能執行任何操作。 根據您希望如何工作以及包含標記和樣式的內容，您可以使用position: absolute或position: fixed 。 兩者都將從文檔流中刪除您的元素，但它們之后會略有不同。 一旦應用了position屬性，你就需要為你的頁腳添加更多樣式，以使它看起來你想要的樣子。