2013-11-02 63 views
2

我一直花費數小時試圖解決這個問題,但沒有任何結果。固定頁腳和標題和動態內容與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。

+1

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

+0

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

回答

1

要使內容居中,請使用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> 
0

試試這個:

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

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

0

我也有這樣的解決方案: 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>

相關問題