僅顯示HTML內容的垂直滾動條

我有一個HTML標記，頂部固定頭，底部有一隻腳。腳不是固定的，但總是在視口的底部，如果瀏覽器在高度上調整大小，它應該直接位於內容的下面。在這種情況下，應該出現一個垂直滾動條。滾動條應從頭部下方開始，並在窗口底部結束。我有以下的標記和CSS：僅顯示HTML內容的垂直滾動條

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Scroll Test</title> 
    <style type="text/css"> 
    html, body, #header 
    { 
     top: 0; 
     right: 0; 
     left: 0; 
     bottom: 0; 
    } 
    html, body 
    { 
     min-height: 100%; 
     width: 100%; 
    } 
    body { 
     overflow-y:hidden; 
     margin:0; 
     position: absolute; 
     padding: 0; 
    } 
    #header 
    { 
     position: fixed; 
     height: 120px; 
     z-index: 9200; 
     background: #555; 
     min-width: 945px; 
    } 
    .page_margins_scroller 
    { 
     height: 100%; 
     overflow-y:auto; 
    } 
    .page_margins 
    { 
     min-width: 945px; 
     min-height: 100%; 
     background: #888; 
    } 
    .page 
    { 
     padding-top: 120px; 
    } 
    #footer 
    { 
     background: #ccc; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="header"> 
     Head 
    </div> 
    <div class="page_margins_scroller"> 
     <div class="page_margins"> 
      <div class="page"> 
       <div id="main"> 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

       Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

       Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

       Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
       </div> 
      </div> 
     </div> 
     <div id="footer"> 
      Foot 
     </div> 
    </div> 
    </body> 
</html>

問題，我有這個代碼，我問你的解決方案：

滾動條頭
滾動條的背後總是可見和滾動（因爲內容
的100％的高度，也許一點點，如果我在寬度調整低於945px的瀏覽器，並向左滾動腳的寬度不是100％（背景顏色爲白色）好的這個問題，我們必須添加min-width：945px;到#footer的[/編輯]
它不會在IE7工作

我已經與IE7，IE8，IE9和FF4測試，我希望把它在所有的人都在工作，也許FF3.6也是。也許有人有一個簡單的解決方案，希望沒有JavaScript。如果你想要，你可以改變標記。

在此先感謝約亨

來源

2011-05-18 Jochen

檢查出這個小提琴：http://jsfiddle.net/anish/Rs982/

我沒有檢查它IE.please檢查。

來源

2011-05-18 09:53:52 Anish

好的，不錯。但問題在於，由於「.page_margins_scroller」高度爲70％，腳並不總是處於最底部。如果瀏覽器是全屏的話，腳下有白色區域。 – Jochen 2011-05-18 10:07:01

你seeting頭設置爲120px;所以，如果你設定爲100％至.page_margins_scroller那麼它會採取100％來自頭part.That的我調整到70％。 – Anish 2011-05-18 10:12:25

是的，我知道，但低於腳的白色空間是不是真的很美，不是嗎？也許有人對此有解決方法？ – Jochen 2011-05-18 10:30:58

僅顯示HTML內容的垂直滾動條

回答

相關問題