如何保持頁腳底部？

CSS如何保持頁腳底部？

* { 
    margin: 0px; 
    padding: 0px; 
} 
html { 
    margin: 0px; 
    padding: 0px; 
} 
body { 
    line-height: 1; 
    margin: 0px; 
    padding:0px; 
    background:url("../images/22.jpg") scroll center top #16202C; 
    /* box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; 
    -webkit-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; 
    -moz-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; 
-o-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; */ 
    color: #464646; 
    font: 13px/17px arial, sans-serif; 
    min-width: 1300px; 
} 
#wrapper { 
    margin: 0px; 
} 
#header { 
    height: 40px; 
    width: 100%; 
} 
#bodyWrapper { 
    width: 980px; 
    margin: 0px auto; 
    position: relative; 
    z-index: 2; 
    -webkit-box-shadow: 0px 0px 2px #000 outset; 
    -moz-box-shadow: 2px 0px 2px #000 outset; 
    box-shadow: 20px 0px 2px #000 outset; 
} 
#bodyDiv { 
    min-height: 550px; 
    height: 100%; 
    background:#fff; 
    padding:20px 10px; 
} 
#footer { 
    background: url("../images/footer_back.png") repeat-x scroll left top transparent; 
    height: 100px; 
    margin-top: -50px; 
    position: relative; 
    width: 100%; 
    z-index: 1; 
}

HTML

<body> 
    <div id="topHeaderBar"></div> 
    <div id="wrapper"> 
     <div id="bodyWrapper"> 
      <div id="header"> 
       <jsp:include page="menu.jsp"></jsp:include> 
      </div> 
      <div id="bodyDiv" style="position: relative;">body content</div> 
      <div id="footer"> 
       <jsp:include page="footer.jsp"></jsp:include> 
      </div> 
     </div> 
</body>

請幫我，我不能在
頁面的底部調整頁腳當正文內容不太頁腳將被轉移向上和最小高度：550px在#bodyDiv創建問題在不同的屏幕分辨率

來源

2013-07-22 Arvind Jhajhria

最佳的解決方案http://www.cssstickyfooter.com/ – designtocode

檢查粘頁腳：HTTP： //ryanfait.com/sticky-footer/ – acudars

Ryan fait的粘腳是迄今爲止最好的做法。 –

HTML

<div id="topHeaderBar"></div> 
     <div id="wrapper"> 
      <div id="bodyWrapper"> 
       <div id="header"> 
        <jsp:include page="menu.jsp"></jsp:include> 
       </div> 
       <div id="bodyDiv" style="position: relative;">body content</div> 
       <div id="footer"> 
        <jsp:include page="footer.jsp"></jsp:include> 
       </div> 
      </div>

CSS：

html,body{ 
     height: 100% 
    } 

    #header{ 
     background-color: yellow; 
     height: 100px; 
     width: 100%; 
    } 

    #holder { 
     min-height: 100%; 
     position:relative; 
    } 

    #body { 
     padding-bottom: 100px; 
    } 

    #footer{ 
     background-color: lime; 
     bottom: 0; 
     height: 100px; 
     left: 0; 
     position: absolute; 
     right: 0; 
    }

來源

2013-07-22 09:30:09

Divya我不想粘頁腳，只需要在頁面上的內容較少時將瀏覽器窗口的底部設置爲頁腳。感謝您的幫助 –

以下是您需要的示例：http://jsfiddle.net/ELUGc/和http://jsfiddle.net/ELUGc/1/如果您有任何問題，請告訴我。 –

我很欣賞你的答案，但我已經使用了上述的HTML佈局，對我來說不可能改變它。你可以請修改我的上述給定的代碼和CSS，以便它的工作。 –

#footer { 
    background: url("../images/footer_back.png") repeat-x scroll left top transparent; 
    height: 100px; 
    margin-top: -50px; 
    position: absolute; 
    width: 100%; 
    z-index: 1; 
    clear:both; 
}

來源

2013-07-22 09:31:34

對不起，工作不正常 –

很抱歉讓您工作試試這個工作在我的最後看到答案我修改了它 –

試試這個：

#footer { 
    background: url("../images/footer_back.png") repeat-x scroll left top transparent; 
    height: 100px; 
    margin-top: -50px; 
    position: fixed; 
    bottom:0; 
    width: 100%; 
    z-index: 1; 
}

來源

2013-07-22 09:31:48

頁腳將被設置在底部，但身體內容高度不是100 ％ –

使'wrapper'和'bodyWrapper'的高度達到100％（'height：100％;'） –

這是否行得通？ –

如何保持頁腳底部？

回答

相關問題