別樣的粘頁腳問題

我的網頁... http://webpages.charter.net/jolove/Escort_Folder/test.html 別樣的粘頁腳問題

感謝：fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css

現在我有堅持底部的功能頁腳窗口..

除了現在我需要做的是讓頁腳堅持底部與頁腳上方的可滾動區域的高度收縮或相應隨着窗口高度的變化。

換句話說，窗口的垂直滾動條不應該出現。

約翰

來源

2010-08-14 John Love

如果正確理解你正在試圖做它可以使用的div百分比高度做什麼。這裏的基本思想是：

<div id="header" style="height: 10%"></div> 

<div id="scrollableContent" style="height: 60%; overflow: auto"></div> 

<div id="footer" style="height: 30%"></div>

使用百分比高度每格將根據窗口大小，只有scrollableContent DIV調整將有一個滾動條。

來源

2010-08-14 20:24:52

[解決]感謝所有誰回答。 http://webpages.charter.net/jolove/Escort_Folder/test3.html 我不希望頁眉或頁腳高度發生變化，所以我沒有在其中加入％。我真的不想在可滾動內容中使用％，因爲可滾動內容的底部並不與頁腳頂部對齊。所以..我將可滾動內容更改爲position：absolute;與頂部匹配：（頁眉的高度）和底部:(頁腳的高度）。標題保持相對和頁腳保持絕對..並沒有醜陋？窗口滾動條。再次感謝大家。 – 2010-08-19 17:36:18

在Mac上測試至今，沒有Windows！任何接受者？ – 2010-08-19 17:45:50

我不確定你是否希望下面的試試。在#poemScroller變化height:28em;到height:auto;

來源

2010-08-14 22:16:37 Sotiris

嘗試用#poemScroller擴展到#footer下面的結果。我*認爲*這個結果是有道理的，因爲不是'自動'相當於100％。 – 2010-08-18 21:01:38

可以使用靜態定位來實現相同的行爲看這個例子

<html> 
    <head> 
     <style> 
      #header{ 
       position:fixed; 
       top:0; 
       height:50px; 
       z-index:5; 
       width:100%; 
      } 
      #content{ 
       /* margin top should be >= header height 
        this also applies for footer */ 
       margin: 50px 0; 
       width:100%; 
      } 
      #footer{ 
       position:fixed; 
       bottom:0; 
       height:50px; 
       z-index:5; 
       width:100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header" > <h1>This is header</h1> </div> 
     <div id="content" > 
      <p>alot of content</p> 
     </div> 
     <div id="footer" > <h1>This is footer</h1> </div> 
    </body> 
</html>

來源

2010-08-14 23:29:42 Barakat

別樣的粘頁腳問題

回答

相關問題