粘性頁腳工作出現問題

我有一個網站，我目前正在處理這需要粘性頁腳，因爲其中一些頁面內容小於其他頁面。粘性頁腳工作出現問題

我已經嘗試了許多資源/教程試圖讓一個棘手的頁腳工作。

我設法執行本教程以下是我的代碼與它去。我希望有人

任何人都可能建議CSS更改我的代碼來實現此功能。

<body> 
    <div id="wrapper"> 
     <div id="header-wrap"> 
      <div id="header"></div> 
      <div id="home-header"></div> 
      <div class="push"></div> 
     </div> 
     <div id="footer-wrap"> 
     </div> 
    </div> 
</body>

CSS

#footer-wrap 
{ 
    background: url("images/footer.jpg") repeat-x scroll center bottom transparent; 
    color: rgb(117, 139, 141); 
    height: 462px; 
    position: relative; 
    width: 100%; 
} 
#header-wrap 
{ 
    clear: both; 
    min-height: 100%; 
    margin-bottom: -462px; 
} 
#header-wrap:after 
{ 
    content:""; 
    display:block; 
    height:462px; 
}

不是爲我工作。需要幫忙！

另外'推'沒有被使用。也許用它？

編輯

body { 
    height: 100%; 
    margin:0px 
} 

html 
{ 
height: 100%; 
margin: 0px; 
} 

#wrapper 
{ 
    min-height: auto !important; 
    min-height: 100%; 

}

來源

2013-07-04 Gareth Alined

UPD

<style type="text/css"> 
    #footer-wrap 
    { 
     height: 462px; 
     position: relative; 
     width: 100%; 
    } 
    html, body { 
     height: 100%; 
     margin:0px; 
     background: #eee; 
     margin-bottom: -462px; 
    } 

    #wrapper 
    { 
     min-height: auto !important; 
     min-height: 100%; 
     border: 1px solid red; 
     margin-bottom: -462px; 
    } 
    #wrapper:after 
    { 
     content:""; 
     display:block; 
     height:462px; 
    } 
    </style>

HTML

<div id="wrapper"> 
    <div id="header-wrap"> 
    <div id="header"></div> 
    <div id="home-header"></div> 
    <div id="page-wrap"></div> 
    </div> 
</div> 
<div id="footer-wrap"> 
</div>

來源

2013-07-04 04:47:38 naffiq

對不起肯定。我剛剛補充說。 –

然後我認爲問題在於你的頁腳在你的包裝內。 – naffiq

我把頁腳放在包裝紙外面。還是行不通。 –

您可以通過CSS的方法來做到這點

個CSS

body, html{ 
    padding:0; 
    margin:0; 
    height:100%; 
} 

.wrapper{ 
    min-height:100%; 
    position:relative; 
} 

.container{ 
    width:960px; 
    margin:0 auto; 
    padding-bottom:100px; 
} 

.header{ 
    height:100px; 
    background-color:#066; 
} 

.footer{ 
    position:absolute; 
    bottom:0; 
    height:100px; 
    background-color:#006; 
    width:100%; 
}

HTML

<div class="wrapper"> 
    <div class="container"> 

     <div class="header"> 
      Header 
     </div> 
     <div style=" text-align:center; padding-top:25px;"> 
     Place you content here as much as you like 
     </div> 

    </div> 

    <div class="footer"> 
     Footer 
    </div> 
</div>

工作js Fiddle File

來源

2013-07-04 05:44:19

這工作。

CSS

* { 
    margin: 0; 
} 
html, body, #wrapper { 
    height: 100%; 
} 
.header-wrap { 
    min-height: 100%; 
    margin-bottom: -462px; 
} 
.header-wrap:after { 
    content: ""; 
    display: block; 
} 
#footer-wrap, .header-wrap:after { 
    height: 462px; 
} 
#footer-wrap { 
    background: orange; 
}

HTML

<div id="wrapper"> 
    <div class="header-wrap"> 
     <div id="header">#header</div> 
     <div id="home-header">#home-header</div> 
    </div> 

    <footer id="footer-wrap"> 
     #footer-wrap 
    </footer> 
</div>

來源

2013-07-04 06:01:20 hungerstar

粘性頁腳工作出現問題

回答

相關問題