爲什麼頁腳不能一直走到底部？

我有一個網頁如下： http://www.transeeq.com/health/bq17a.html#爲什麼頁腳不能一直走到底部？

黃色頁腳不會推到底部。有任何想法嗎？這裏是CSS代碼：

#container { 
    min-height:100%; 
    position:relative; 
} 

#body { 
    padding-bottom:60px; /* Height of the footer */ 
} 

#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px;   /* Height of the footer */ 
    background:#CCCC66; 
}

來源

2010-02-02 sonny5

作爲一個純粹的HTML/CSS的設計問題，這屬於上doctype.com – BobMcGee 2010-02-02 03:52:12

你的意思是說，它不會延伸到底部時，你必須滾動查看所有內容嗎？ – Jacob 2010-02-02 03:53:30

@BobMcGee：HTML/CSS問題確實屬於這裏。 DocType不隸屬於StackOverflow，像這樣的問題在這裏確實有一席之地。 – 2010-02-02 03:58:58

我剛測試過它;它延伸到Chrome，Firefox，Opera，Safari，IE8，IE7甚至IE6的底部。你在哪個瀏覽器中遇到這個問題，你能更詳細地描述你的問題嗎？

來源

2010-02-02 03:50:15 Zarel

它的工作原理;你的CSS可能被緩存在本地。你最近是否做過強制瀏覽器刷新？按Ctrl + F5。

來源

2010-02-02 03:51:55

您是否嘗試將頁腳浮動到底部並將位置更改爲相對？

來源

2010-02-02 03:52:34 poldo

你有「身高：60px;」在#footer。嘗試在.css中創建一個更小的數字。

來源

2010-02-02 03:56:06 brianray

I use this css.

* { 
     margin: 0; 
} 
html, body { 
     height: 96%; 
} 
.wrapper { 
     min-height: 96%; 
     height: auto !important; 
     height: 96%; 
     margin: 0 auto -4em; 
} 
.footer, .push { 
     height: 4em; 
}

而且你可以用它在你的HTML頁面這樣

<html> 
    <head> 
     <link rel="stylesheet" href="layout.css" ... /> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <p>Your website content here.</p> 
      <div class="push"></div> 
     </div> 
     <div class="footer"> 
      <p>Copyright (c) 2008</p> 
     </div> 
    </body> 
</html>

它的工作原理相當不錯，在IE和Firefox

來源

2010-02-02 03:56:54

@brasofilo這是一箇舊的答案;-)我編輯它以添加基本信息。 – 2014-07-20 12:28:25

答案出現在低質量帖子評論中。有人可能會標記它。現在看起來不錯;） – brasofilo 2014-07-20 13:47:31

如果您在頁腳嘗試position: fixed代替希望確保它始終位於窗口的底部。否則，爲了確保它始終位於文檔的底部，可以將其位置保持爲相對/自動。

來源

2010-02-02 03:57:31 Jacob

將footer放在container div之內 - 如果您想使用position：absolute將頁腳放在頁面的底部（而不是窗口的底部），則需要將它放在相對位置的div中，例如作爲你的容器。

看一看this article

來源

2010-02-02 04:05:52 jfrej

嘗試的CSS代碼，實現了「粘頁腳」（每http://ryanfait.com/sticky-footer/）。

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
}

來源

2010-02-02 10:33:49 pixeltocode

爲什麼頁腳不能一直走到底部？

回答

相關問題