固定頁腳和標題和動態內容與CSS

我一直花費數小時試圖解決這個問題，但沒有任何結果。固定頁腳和標題和動態內容與CSS

我想要的真的很簡單（理論上）。我想要一個全屏網頁，頁眉始終保持在頂部，頁腳始終保持在底部。內容是動態的。如果它超過了頁面，它應該增長，推下頁腳。我想要一個980像素寬的div在水平居中的內容中。我想給這個div一個不同的背景顏色。如果內容只是一行文字，我仍然希望div（背景顏色）成爲頁腳和標題之間100％的空間。我做了一個豐富多彩的例子：

enter image description here

的代碼，我到目前爲止有：

<html> 
<head> 
<style> 
#container { 
    height: 100%; 
    width: 100%; 
    background: green; 
    position: absolute; 
} 
#header, #footer { 
    height: 100px; 
    width: 100%; 
    background: red; 
} 
#body { 
    height: 100%; 
    width: 100%; 
    background: blue; 
} 
#content { 
    width: 980px; 
    background: yellow; 
} 

</style> 
<head> 

<body> 
<div id="container"> 
    <div id="header"></div> 
    <div id="body"> 
    <div id="content"> 
     content 
    </div> 
    </div> 
    <div id="footer"></div> 
</div> 
</body> 
</html>

此代碼是遠遠好。首先，如果頁面內容超出頁面，它不能將頁腳保留在頁面底部。其次，我不知道如何包含980像素居中的div。

來源

2013-11-02 Robert Hamers

如果你有一個固定的頁腳和頁眉，你應該考慮使用'位置。固定'） – Terry

@Robert Hamers用JavaScript查看我更新的答案。我相信這就是你要找的。 – MCSharp

要使內容居中，請使用margin: 0 auto;。這將設置頂部和底部的邊距爲0，並自動調整左右邊距。你所問的很可能會涉及JavaScript。您將始終有固定的頁腳，或者頁腳位於內容的底部。

你在問什麼不是很實際。如果你有很多內容，你的頁腳將被推倒。這聽起來像是當頁面上的內容很少時，您希望將頁腳放在底部。

我寫了一些代碼讓你開始。 JavaScript提供了你想要的效果。取消註釋CSS高度或在div中添加大量內容，頁腳將被壓下。

<html> 
<head> 
    <style> 
     body, #body, #header, #footer { width: 100%;margin: 0; padding: 0; } 
     #header { height: 100px; background: #7eff02; } 
     #footer { height: 100px; background: #ff5c01; } 
     #content { width: 980px; background: #fcff00; margin: 0 auto; 
      /*height: 3000px;*/ 
     } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script> 

     $(document).ready(function() { 
      var headerHeight = $("#header").height(); 
      var footerHeight = $("#footer").height(); 

      var resizeTimer; 
      $(window).resize(function() { 
       clearTimeout(resizeTimer); 
       resizeTimer = setTimeout(onWindowResize(), 100); 
      }); 

      onWindowResize(); 

      function onWindowResize() { 
       if ($("#content").height() < (window.innerHeight - headerHeight - footerHeight)) { 
        $("#content").css("height", (window.innerHeight - headerHeight - footerHeight)); 
        $("#footer").css({ "position": "fixed", "bottom": "0" }); 
       } 
       else { 
        $("#content").css("height", ""); 
        $("#footer").css({ "position": "", "bottom": "" }); 
       } 
      } 
     }); 
    </script> 
    <head> 

     <body> 
      <div id="container"> 
       <div id="header"></div> 
       <div id="body"> 
        <div id="content"> 
         CONTENT 
        </div> 
       </div> 
       <div id="footer"></div> 
      </div> 
     </body> 
</html>

來源

2013-11-02 23:15:04 MCSharp

試試這個：

body {padding:100px 0;} 
#header, #footer {position:fixed;width:100%;height:100px;} 
#header {top:0;} 
#footer {bottom:0;} 
#container {width:980px;margin:0 auto;}

你要當你的頁眉或頁腳內容超過設定的高度，遇到了其他問題，雖然。

來源

2013-11-02 23:15:23 ravb79

我也有這樣的解決方案： http://jsfiddle.net/AZE4K/

body { 
 
    padding:0; 
 
    margin:0;  
 
} 
 

 
#header, #footer { 
 
    position: fixed; 
 
    width:100%;  
 
} 
 

 
#header { 
 
    left : 0; 
 
    top : 0; 
 
    background-color:red; 
 
    height:100px; 
 
} 
 

 
#footer { 
 
    left : 0; 
 
    bottom : 0; 
 
    background-color:green; 
 
    height:50px; 
 
} 
 

 
#content { 
 
    background-color : #111111; 
 
    color:#DDDDDD; 
 
    width:95%; 
 
    height : 1500px; 
 
    margin:auto; 
 
    margin-top : 100px; 
 
    margin-bottom: 50px; 
 
}

<div id="header"></div> 
 
<div id="content"> 
 
    <h1>Some text</h1> 
 
</div> 
 
<div id="footer"></div>

來源

2013-11-02 23:19:50 dooxe

固定頁腳和標題和動態內容與CSS

回答

相關問題