除了位置絕對和粘腳footer

我知道還有其他關於絕對定位和粘性頁腳的問題，我嘗試了很多解決方案，但我沒有做這個工作，所以我試圖發佈整個佈局html代碼，看看是否有人可以找到解。我使用this StickyFooter解決方案。

問題是正確的吧。

它應該固定在距頁腳25px處，但如您所見，如果酒吧內容增長，則內容會在頁腳和酒吧底部邊界之外下降。

很明顯，我會將內容留在酒吧內，導致酒吧增長並推下頁腳。

<!doctype html> 
<head> 
    <style type="text/css">   
     /* Sticky Footer */ 
     { margin: 0; } 
     html, body, form { height: 100%; } 

     .wrapper { 
      min-height: 100%; 
      height: auto !important; 
      height: 100%; 
      margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ 
     } 

     #footerPage, #divPush 
     { 
      height: 50px; /* .push must be the same height as .footer */ 
     } 
     /* End/Sticky Footer */ 


     body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; } 

     div.wrapper { background-color:#fff; position:relative; } 

     #headerPage { } 
      #divHeaderImg { height:100px; }    
      #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; } 
      #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; } 

     #sectionBar { 
      z-index:1000; 
      position:absolute; right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */ 
      border:solid 2px #90bfe7; background-color:#ffffff; 
      padding:15px 10px; 
     }   

     #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; } 

     #sectionPage { padding:12px 10px 10px 10px; width:700px; } 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
    <div id="sectionBar"> 
     <div id="divBarContent"> 
      <div> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
       Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
       Integer quam turpis, porttitor nec congue convallis, fringilla sit amet purus. Donec at elit mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula tellus, rhoncus eget faucibus vitae, bibendum vel arcu. Pellentesque ante lectus, sodales at interdum sit amet, sollicitudin cursus quam. Fusce eget orci vel eros scelerisque dictum. Cras facilisis, metus vitae venenatis aliquet, nibh sem blandit mi, sit amet viverra massa ipsum ut quam. Vivamus vitae nunc eget justo pellentesque mollis vel non justo. Mauris tempus mattis rutrum. Donec nec viverra nulla. Cras commodo felis sit amet nulla fringilla mollis. 
      </div> 
     </div> 
    </div> 
    <div id="headerPage"> 
     <div id="navPage">menu</div> 
     <div id="divHeaderImg"></div> 
     <div id="divSubMenu">sub menu</div> 
    </div> 
    <div id="sectionPage"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
     Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
    </div> 
    <div id="divPush"></div> 
</div> 
<div id="footerPage">footer</div> 
</body> 
</html>

來源

2012-01-19 opaera

也許這是無法解決的？ – opaera

仍然認爲這是無法解決的。有一些CSS大師想要嘗試嗎？ – opaera

我刪除position:absolute;和#sectionBar定義添加一個float:right;。然後立即添加<br clear="all" />，然後用類「包裝器」關閉div。

然後你將不得不重新定位你的元素。利用邊距和填充來獲得理想的結果。

您描述的問題是由position:absolute行爲引起的。事實上，在絕對定位的情況下，該元素將從html的自然流程中移除，並且顧名思義，絕對定位:)因此，其他元素（例如頁腳）會在其「下方」。

來源

2012-01-19 11:00:01

對不起，但這是行不通的。酒吧內容落在頁腳後面，而且，如果酒吧內容很小，酒吧不會保持固定在距頁腳25px處，而只是適合其內容。用正確的浮動取代絕對定位是一個久經考驗的解決方案，但沒有成功。無論如何感謝你的答案。 – opaera

我做了你發佈的代碼一些變化，我希望幫助`

<style type="text/css">   
    /* Sticky Footer */ 
    { margin: 0; } 
    html, body, form { height: 100%; } 

    .wrapper { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ 

    } 

    #footerPage 
    { 
     height: 50px; /* .push must be the same height as .footer */ 

    } 

    #divPush {height: 800px; } 

    /* End/Sticky Footer */ 


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; } 

    div.wrapper { background-color:#fff; position:relative; } 

    #headerPage { } 
     #divHeaderImg { height:100px; }    
     #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; } 
     #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; } 

    #sectionBar { 
     z-index:1000; 
     right:10px; top:13px; width:200px; /* footer height + 25px */ 
     border:solid 2px #90bfe7; background-color:#ffffff; 
     padding:15px 10px; 
     display:inline; 
     float:right; 
     height: 100%; 
    }   

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; } 

    #sectionPage { padding:12px 10px 10px 10px; width:700px; } 
</style>`

來源

2012-01-19 22:04:41 Mouna

對不起，但與上一個答案類似，當頁面內容大於欄內容時，ber不會增長。不管怎麼說，還是要謝謝你。 – opaera

我可能會在你在找什麼相混淆，但爲什麼不添加溢出：根據ID自動= sectionBar ？這樣，如果內容如果大於你的方塊，它將添加一個滾動條，而不是流過頁腳。再次，也許我錯過了你正在尋找的問題或最終結果。

來源

2012-01-23 20:18:48

我沒有指定這個，但我不想滾動條......這顯然是我想的。 – opaera

我明白你現在在說什麼。 –

@ lorenzo.macon是正確的 - 您需要避免使用position: absolute，並使用float來代替。

您的問題之一還在於您的頁腳需要具有相同的總高度作爲包裝的負邊距;看起來也許你沒有考慮填充和/或方程邊界。

所提供的代碼在代碼中包含了第二個側邊欄，因此如果它沒有被浮動（例如，對於響應式佈局），它會在稍後出現。但是你可以採取任何方式，它應該可以工作。

<!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" xml:lang="en"> 
<head> 
    <style type="text/css">   

/* LAYOUT */ 
    /* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */ 

* { margin: 0 } 

html, body, .wrapper { 
    height: 100%; 
    } 

body { 
    margin: 0 auto; 
    position: relative; 
    } 

.wrapper { 
    position: relative; 
    min-height: 100%; 
    height: auto !important; 
    margin: 0 auto -70px; /* bottom margin = -1 x (#footerPage height + padding + border) */ 
    } 

#footerPage, #divPush { 
    height: 50px; /* .push must be the same height as .footer */ 
    padding: 10px; /* must have same padding! */ 
    } 
#divPush { 
    clear: both; 
    } 
    /* End/Sticky Footer */ 


#sectionPage { 
    width: 70%; 
    float: left; 
    } 

/* 
    #sectionBar has percentage for L+R padding, so can calculate w/ #sectionPage 
    and ems for T+B padding so can relate to typography. This is less important. 
*/ 
#sectionBar { 
    width: 20%; 
    padding: 2em 5%; 
    margin-left: -1px; /* IE7 needed this */ 
    float: right; 
    display: inline; /* Fix for IE5/6 doubled float margin issues - see http://www.positioniseverything.net/explorer/doubled-margin.html */ 
    }   

/* VISUAL STYLE separated for clarity */ 

body { 
    background: #000; 
    max-width: 960px; /* use max-width for flexible layouts */ 
    font-family: Tahoma, Verdana; 
    } 

div.wrapper { background: #fff } 

#divHeaderImg { height: 100px; }    
#navPage { background: #90bfe7; padding: .5em; } 
#divSubMenu { 
    background: #90bfe7; 
    padding: .5em; 
    } 

#sectionBar { 
    background: #fcf; 
    }   

#footerPage { 
    position: relative; 
    background: #90bfe7; 
    } 

#content { 
    background: #ffc; 
    padding: 12px 10px 10px 10px; 
    } 
    </style> 
</head> 
<body> 
<div class="wrapper"> 

    <div id="sectionPage"> 
    <div id="headerPage"> 
     <div id="navPage">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div> 
     <div id="divHeaderImg"></div> 
     <div id="divSubMenu">sub menu</div> 
    </div><!-- #headerPage --> 
    <div id="content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
    </div> 
    </div><!-- #sectionPage --> 

    <div id="sectionBar"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
    </div> 

    <div id="divPush"></div> 

</div><!-- .wrapper --> 

<div id="footerPage">footer</div> 
</body> 
</html>

來源

2012-01-25 04:05:24

我知道這是一個解決方案，但我不需要它，因爲它與我的佈局不同。我發佈的內容是我必須構建的，這是一個不同的佈局，還有一個關於代碼的內容，如果頁面內容增長，欄不增長，您應該使用Css Holy Grail解決方案在您的碼。 – opaera

留下你的HTML作爲-是，改變你的CSS這樣的：

/* Sticky Footer */ 
    { margin: 0; } 
    html, body, form { height: 100%; } 

    .wrapper { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ 
     clear:both; 
    } 

    #footerPage, #divPush 
    { 
     height: 50px; /* .push must be the same height as .footer */ 
    } 
    /* End/Sticky Footer */ 


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; } 

    div.wrapper { background-color:#fff; position:relative; } 

    #headerPage { width:960px;position:absolute;top:0;left:0; } 
     #divHeaderImg { height:100px; }    
     #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle;width:940px; } 
     #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; } 

    #sectionBar { 
     z-index:1000; 
     position:relative; float:right;right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */ 
     border:solid 2px #90bfe7; background-color:#ffffff; 
     padding:15px 10px; 
    }  
    #divPush {clear:both;} 

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; } 

    #sectionPage { padding:12px 10px 10px 10px; width:700px;padding-top:190px; }

附：這是一個糟糕的問題。

我打算給你帶來懷疑的好處，並說你正在爲一個不合理的客戶端工作，或者用一些不可編輯的HTML標記工作，並且你需要做一些破解來獲得這個可信的。

否則，採取這種方法沒有任何藉口。

來源

2012-01-25 20:20:55 1nfiniti

這裏有一個「工作」代碼的小提琴... CSS大師不需要...這只是一個便宜的黑客工作。 CSS Guru會告訴你不要以這種方式構建標記。 http://jsfiddle.net/TPk29/5/ – 1nfiniti

PS有沒有辦法讓正確的欄與內容垂直成長。您可以通過將背景圖像應用到與右欄背景對齊的內容來模擬此內容......如果這有助於您的話 – 1nfiniti

這不起作用，當頁面內容增長並且它比欄內容大時，酒吧不會垂直生長。我認爲這實際上是無法解決的，順便說一下，它只是一個在Photoshop中設計的佈局，我也喜歡它。所以我只是想知道是否有人能使它工作。也許它是無法解決的，在這種情況下，我會改變它（已經改變）。順便說一下，我認爲這對於css激情是一個很好的問題。 – opaera

你不能讓巴的絕對頂部和底部的「利潤」，並期望其增長超過你告訴它是大小。

下面是一個稍微不同的方法，它看起來非常像你的。我沒有在其他瀏覽器比Firefox 8測試，所以我不能保證它是防彈的，但至少應該給你另外一個設想：

<!doctype html> 
<head> 
<style type="text/css">   
/* Sticky Footer */ 
{ margin: 0; } 
html, body, form { height: 100%; } 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ 
} 

#footerPage, #divPush 
{ 
    height: 50px; /* .push must be the same height as .footer */ 
} 
/* End/Sticky Footer */ 


body { background-color:#000; 
width:960px; 
margin:0 auto; 
position:relative; 
font-family:Tahoma, Verdana; 
} 

div.wrapper { 
    background-color:#fff; position:relative; 
    border:2px solid pink; 
} 

#headerPage { 
    border:2px solid green; 
} 
#divHeaderImg { height:100px; }    
#navPage { 
    height:30px; 
line-height: 30px; 
font-size:16px; 
background-color:#90bfe7; 
padding:0 10px; 
/* 
position:relative; 
overflow:hidden; 
*/ 
vertical-align: middle; 
    border:2px solid lime; 

} 
#leftBox { 
    border:2px solid yellow; 
    float;left; 
} 
#divSubMenu { 
    border:2px solid darkgreen; 
    background-color: #90BFE7; 
line-height: 28px; 
padding: 10px; 
vertical-align: middle; 
} 

#divBarContent { 
    border:1px solid firebrick; 
} 
#divBarContent div { 
    border:1px solid cyan; 

}   
#sectionBar { 
    z-index:1000; 
    /* 
    position:absolute; right:10px; top:13px; width:200px; bottom:75px; 
    */ 
    border:solid 2px #90bfe7; background-color:#ffffff; 
    padding:15px 10px; 
    float:right; 
    margin:0px 10px 25px 0px; 
    width:200px; 
    /* 
    */ 
}   
/* 
*/ 
/* footer height + 25px */ 

#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; } 

#sectionPage { padding:12px 10px 10px 10px; width:700px; } 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div id="sectionBar"> 
     <div id="divBarContent"> 
      <div> 

# Update from 2.0-BETA3 to 2.0-BETA4 

## XML Driver <change-tracking-policy /> element demoted to attribute 

We changed how the XML Driver allows to define the change-tracking-policy. The working case is now: 


# Update from 2.0-BETA2 to 2.0-BETA3 

## Serialization of Uninitialized Proxies 

As of Beta3 you can now serialize uninitialized proxies, an exception will only be thrown when 
trying to access methods on the unserialized proxy as long as it has not been re-attached to the 
EntityManager using `EntityManager#merge()`. See this example: 


The Collection interface in the Common package has been updated with some missing methods 
that were present only on the default implementation, ArrayCollection. Custom collection 
implementations need to be updated to adhere to the updated interface. 


      </div> 
     </div> 
    </div> 

    <div id="leftBox"> 
     <div id="headerPage"> 
      <div id="navPage">menu</div> 
      <div id="divHeaderImg"></div> 
      <div id="divSubMenu">sub menu</div> 
     </div> 
     <div id="sectionPage"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
      Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
      <br> <br> <br> <br> <br> <br> moo 
     </div> 
     <div id="divPush"></div> 
    </div> 
    <div style="clear:both;"> 
</div> 
<div id="footerPage">footer</div> 

</body> 
</html>

來源

2012-02-09 01:51:42

這與發佈的其他解決方案相同，當主體內容增長時，條不會垂直延伸。我懷疑這是無法解決..順便謝謝你的答案。 – opaera

np。你想要什麼是可能的，但不是你如何做到的。 –

你或許可以使用position:relative;，而不是因爲絕對會讓你除非你使用z-index:，否則元素會落在它後面，那麼元素將會在它之上。看看這個粘頁腳，如果你真的要打造這種方式

http://www.cssstickyfooter.com/using-sticky-footer-code.html

編輯：

我不知道你所要完成真正的東西。因爲目前構建的HTML方式對於你正在做的事情並不是真正的語義。由於sectionBar是一個側欄，它不應該超出你的主要內容，它應該在你的sectionPage內容之後進行構造。你也應該使用花車而不是位置。這樣，你不必處理z-index和內容後退。該頁面也可以使用float正確擴展，但您必須主要使用針對IE的.clearfix hack。

還有幾乎從來沒有的情況下，你必須建立某種特定的方式。唯一的情況就是如果您使用CMS或已有的舊代碼。所以如果你沒有得到你想要的效果，那麼你需要看看你的代碼的結構Semantic。

我在你的評論人看到，這是基於一個Photoshop佈局，使我相信你是從頭開始構建這個並意味着你必須在HTML的完全控制。所以如果是這種情況，那麼說它必須以這種方式建造是不可接受的。

來源

2012-03-07 13:13:18 ddilsaver

我試過位置：相對，但與此我不能得到我想要的。 – opaera

它是可以解決的。你可以通過漂浮#sectionBar來做到這一點，就像@ lorenzo.marcon提到的那樣。

你需要移動#sectionBar to right before＃sectionPage`和包裝兩個元素。我還在包裝器中添加了一個clearfix。

的解決方案見this fiddle。

來源

2012-04-20 14:00:15

除了位置絕對和粘腳footer

回答

相關問題