如何將此嵌套頁腳粘到底部？

我一直在嘗試一些不同的事情，我不知道如何使這個頁腳堅持到底部。困難之所以會出現，是因爲內部有多個嵌套div。我想實現的是將邊框右邊和邊框左邊的包裝器放到頁面的底部以環繞頁腳，但頁腳應該位於頁面的底部。如何將此嵌套頁腳粘到底部？

解釋了所有的嵌套divs：主體具有主要的平鋪背景圖像應用到它和#background有一個透明的覆蓋，使其淡出邊緣。 border-right和border-left div具有重複圖像作爲背景，用作內容div的邊框。

我知道，頁腳div應該是完全分開的，但是當我這樣做時，它保持居中於窗口的寬度而不是邊框的寬度，因此當屏幕縮小時它看起來很亂。

基本頁面結構如下，我也貼了的jsfiddle：http://jsfiddle.net/cutcopypaste/zry4T/

<body> 
<div id="background"> 
    <div id="container"> 

     <div id="header"> 
      <div id="logo"></div> 
      <div id="menu"> 
       <p>Menu</p> 
      </div> 
     </div> 

     <div id="border-left"> 
      <div id="border-right"> 

       <div id="content"> 

        <p>Page Content</p>  
       </div> 
      </div> 
     </div> 
    </div> 
     <div id="footer"> 
      <p>Footer</p> 
     </div> 
</div> 
</body>

來源

2011-02-11 Damon

你應該[閱讀]（http://ryanfait.com/sticky-footer/）。 – zzzzBov 2011-02-11 23:55:45

@zzzzBov我試過這裏概述的技術，它不能在我的頁面上工作：http://jsfiddle.net/cutcopypaste/zry4T/9/ – Damon 2011-02-12 00:58:28

我的解決辦法：http://jsfiddle.net/zry4T/15/

<body> 
<div id="background"> 
    <div id="container"> 

     <div id="header"> 
      <div id="logo"></div> 
      <div id="menu"> 
       <p>Menu</p> 
      </div> 
     </div> 
     <div id="wrapper"> 
     <div id="border-left"> 
      <div id="border-right"> 

       <div id="content"> 

        <p>Page Content</p>  
       </div> 
      </div> 
     </div> 
     <div id="push"></div> 
    </div> 

</div> <div id="footer"> 
      <p>Footer</p> 
    </div> 
</div> 
</body> 

<style type="text/css"> 
* 
{ 
margin: 0; 
padding: 0; 
} 
html, body 
{ 
height: 100%; 
line-height: 1.2; 
} 

body 
{ 
background: #000 url(../images/bg-pattern.png) center top repeat; 
} 

#background 
{ 
background: url(../images/overlay.png) center top repeat-y; 
min-width: 960px; 
padding-left: 1px; 
} 

#container 
{ 
background: red center top no-repeat; 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -60px; 
overflow: hidden; 
width: 960px; 
z-index: 10; 
} 

#header 
{ 
} 
#logo 
{ 
height: 114px; 
width: 960px; 
} 
#logo a 
{ 
border: none; 
display: block; 
height: 90px; 
margin: 60px auto; 
width: 640px; 
} 

#menu 
{ 
background-color: orange; 
} 

#border-left 
{ 
background: blue url(../images/border-left.png) repeat-y 1px -5px; 
height: 100%; 
margin: -4px auto 0; 
width: 912px; 
} 
#border-right 
{ 
background: blue url(../images/border-right.png) repeat-y 857px -5px; 
height: 100%; 
} 
#content 
{ 
background: yellow url(../images/stripes.gif) center top repeat; 
margin: 35px auto 0; 
min-height: 100px; 
padding: 8px 33px 110px; 
width: 738px; 
z-index: 10; 
} 

#push {height: 60px;} 

#wrapper{ 
width:960px; 
margin:o auto; 
} 
#footer 
{ 
background: green url(../images/footergradient.png) repeat-x; 

height: 60px; 
margin: 0 auto; 
clear:both; 
text-align: center; 
width: 808px; 
} 
</style>

來源

2011-02-12 07:36:41 Binos

嗯..我不知道你是否看到不同的東西，但那個頁腳不會堅持到底... – Damon 2011-02-12 22:36:54

難道這點你在正確的方向？

http://jsfiddle.net/zry4T/28/

我基本上放在頁腳絕對在包裝的底部，並確保包裝至少是一樣高的內容。

編輯：更新小提琴

來源

2011-12-17 00:25:03 Nix

如何將此嵌套頁腳粘到底部？

回答

相關問題