如何在不滾動的情況下顯示頁眉和頁腳？

我在寫Web應用程序。我希望頁面適合瀏覽器，以便頁眉和頁腳始終位於瀏覽器的頂部和底部，無需滾動。如何在不滾動的情況下顯示頁眉和頁腳？

我已經能夠在當前版本的Fire Fox，Chrome和Internet Explorer上執行此操作。但是我無法在iPad上使用它。在風景中，iPad可以將網站的寬度完美縮放，以使整個網站的寬度適合，但您需要做少量滾動才能看到頁腳。當iPad以縱向方向握住時，我會看到相反的一面。該網站的全高度可見，無需滾動，但現在您必須水平滾動以查看完整標題。

下面是一個代碼示例： http://jsfiddle.net/v8mkygcw/

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Blank</title> 
    <style type="text/css"> 
     body{margin:0;} 
     #site-links {height:20px; background:#FAFAFA; min-width:932px; border-bottom:solid 1px #A0A0A0;} 
     .site-link {color:#919191; float:left; padding-right:6px; border-right:solid 1px #c7c7c7; margin-right:6px;} 
     #hdr-width {max-width:1040px; min-width:640px; margin:0 auto;} 

     #main{position:absolute; top:21px; bottom: 0; left:0; right:0; overflow:hidden; text-align:center;} 
     #content {position:absolute; top: 0; bottom: 21px; right:0; left:0; overflow:hidden; overflow-y:auto; } 
     #footer {position:absolute; left:0; right:0; bottom:0; height:20px; background:#F8F8F8;border-top:solid 1px #A0A0A0;} 
    </style> 
</head> 
<body> 
    <div> 

     <div id="site-links"> 
      <div id="hdr-width"> 
       <a class="site-link">Link1</a> 
       <a class="site-link">Link2</a> 
       <a class="site-link">Link3</a> 
      </div> 
     </div> 
     <div id="main"> 
      <div id="content"> 
       <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> 
      </div> 
      <div id="footer">Footer</div> 
     </div> 

    </div> 
</body> 
</html>

我真的很感激任何幫助。謝謝！

來源

2014-09-21 user3766657

.site-links有min-width:932px;

這是說給瀏覽器，無論窗口的大小，該分區應該有932px至少，所以會出現滾動。從css中刪除該行。

http://jsfiddle.net/v8mkygcw/1/

來源

2014-09-21 13:24:40

您可以通過給他們固定位置創建一個棘手的頁眉和頁腳：

#site-links {position:fixed; left:0; right:0; top:0; height:20px; z-index:1000; background:#FAFAFA; border-bottom:solid 1px #A0A0A0;} 

#footer {position:fixed; left:0; right:0; bottom:0; height:20px; z-index:1000; background:#F8F8F8;border-top:solid 1px #A0A0A0;}

在這種fiddle身體的高度爲1000像素只是一個示範

來源

2014-09-21 13:31:51

只要改變position:absolute到position:fixed

body{margin:0;} 
 
     #site-links {height:20px; background:#FAFAFA; min-width:932px; border-bottom:solid 1px #A0A0A0;} 
 
     .site-link {color:#919191; float:left; padding-right:6px; border-right:solid 1px #c7c7c7; margin-right:6px;} 
 
     #hdr-width {max-width:1040px; min-width:640px; margin:0 auto;} 
 

 
     #main{position:fixed; top:21px; bottom: 0; left:0; right:0; overflow:hidden; text-align:center;} 
 
     #content {position:absolute; top: 0; bottom: 21px; right:0; left:0; overflow:hidden; overflow-y:auto; } 
 
     #footer {position:fixed; left:0; right:0; bottom:0; height:20px; background:#F8F8F8;border-top:solid 1px #A0A0A0;}

<div> 
 

 
     <div id="site-links"> 
 
      <div id="hdr-width"> 
 
       <a class="site-link">Link1</a> 
 
       <a class="site-link">Link2</a> 
 
       <a class="site-link">Link3</a> 
 
      </div> 
 
     </div> 
 
     <div id="main"> 
 
      <div id="content"> 
 
       <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> 
 
      </div> 
 
      <div id="footer">Footer</div> 
 
     </div> 
 

 
    </div>

來源

2014-09-21 13:32:11

我想試試這個。但我只是將我的iPad更新到iOS 8.0，現在我的原始代碼工作正常。我認爲這是一個移動Safari的錯誤，剛剛得到修復。 – user3766657 2014-09-21 14:34:37

如何在不滾動的情況下顯示頁眉和頁腳？

回答

相關問題