CSS問題

我定義我的頁面頁腳中的CSS文件：如果有更多的數據被添加到頁面CSS問題

#footer { 
    position: absolute; 
    height: 50px; 
    text-align: center; 
    background: #66CCCC; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    height: 18px; 
}

現在，它的動作頁腳下方，頁腳保持它是。有任何解決這個問題的方法嗎？

謝謝。

來源

2009-11-09 miket

使用位置：固定;爲了這。

來源

2009-11-09 14:30:44

這是修復它的最簡單的方法，但不幸的是它在IE6中不被支持，不幸... – peirix 2009-11-09 14:39:01

看看http://www.mozilla.org/causes/serviceweek/internethealth/。當然，你有權不同意他們寫的東西，但我也發現IE很噁心，不支持它。 – 2009-11-09 15:03:05

我當然意味着IE 6 ... – 2009-11-09 15:03:47

不要對頁腳使用絕對定位，將它們綁定到視口（這是bottom: 0px的作用）。

如果您需要在視口底部或內容底部（以較長者爲準）的頁腳，請使用sticky footers。

來源

2009-11-09 14:31:06

爲什麼你有兩個高度的定義？另一種方法是設置min-height，使其高度可以隨着內容「增長」，而不會低於某個高度。

#footer { 
    ..... 
    min-height: 18px; 
}

來源

2009-11-09 14:33:01

如果您正在尋找純粹的CSS，你可以做到以下幾點：

HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link rel="Stylesheet" href="Site.css" runat="server" rev="Stylesheet" type="text/css" /> 
</head> 
<body> 
    <div id="Page"> 
     <div id="Header"> 
      This is my "Header Content"! 
     </div> 
     <div id="Content"> 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
      This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content...   This is my long content... 
     </div> 
     <div id="footer"> 
      This is my "Footer Content"! 
     </div>  
    </div> 
</body> 
</html>

CSS（的site.css）：

#Page 
{ 
    background-color: Red; 
} 

#Header 
{ 
    background-color: Purple; 
    color: White; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    height: 75px; 
    font-size: xx-large;  
    text-align: center; 
} 

#Content 
{ 
    background-color: Lime; 
    position: absolute; 
    top: 75px; 
    left: 0px; 
    right: 0px; 
    bottom: 50px; 
    overflow: auto; 
} 

#footer 
{ 
    position: absolute; 
    text-align: center; 
    background: #66CCCC; 
    height: 50px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
}

我當然要用奇怪的方式設置顏色和位置，以顯示div的相遇。將內容添加到頁面時，將其添加到內容區域，並且由於內容div爲overflow: auto;，它將滾動並且頁眉/頁腳將爲靜態。

希望這會有所幫助！

來源

2009-11-09 15:21:59 Scott

回答

相關問題