保持頁腳底部

我有類似結構的頁面：

<div id="page"> 
    <div id="content"> 
     <h1>News:</h1> 
     <div class="body"> 
      <div class="news"> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <div class="wrapper"> 
       <p>stuffstuffstuff</p> 
     </div> 
    </div> 
</div>

它雖然沒有在它的許多內容有縫好了，但是當我添加了更多的文本頁腳開始行爲怪異，最終只是飛到了頁面中間。我已經嘗試了一些在網上發佈的解決方案，但沒有一個似乎能夠做到這一點，或者我只是在做一些錯誤的事情。無論如何，希望我可以在這裏找到一些幫助

來源

2014-04-24 user3461434

粘滯頁腳是你要找的，在google上搜索「粘滯頁腳ryan fait」 –

好像body類有'position：absolute'，讓頁腳div覆蓋內容div。嘗試刪除。 – amertkara

謝謝！爲了保證起見，儘管我仍然會嘗試粘腳，但刪除'位置：絕對'固定了它。 – user3461434

這裏是粘頁腳不定位的最佳解決方案：http://ryanfait.com/sticky-footer

HTML

<body> 
    <div class="wrapper"> 
     <div class="header"> 
      <h1>CSS Sticky Footer</h1> 
     </div> 

     <!-- content --> 

     <div class="push"></div> <!-- This pushes the footer off --> 
    </div>  
    <div class="footer"> 

    </div> 
</body>

CSS

html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 155px; /* .push must be the same height as .footer */ 
} 

/* 

Sticky Footer by Ryan Fait 
http://ryanfait.com/ 

*/

來源

2014-04-24 18:09:44

謝謝，它工作得很好！ :) – user3461434

這很好讀= D –

@DD。這就像魅力.. !!!!太棒了...它已經修復了我在代碼中的主要問題....非常感謝... – anusreemn

您可以使用類似這在你的css

body{ 
    padding-bottom: 40px; 
} 
#footer{ 
    position: fixed; /* works fine on ios */ 
    bottom:0; 
    left:0; 
    width:100%; 
    height: 40px; 
}

來源

2014-04-24 18:11:33 lchenneberg

也許嘗試這樣的事：

HTML

<div class="page-wrap"> 

    <!-- HTML stuff --> 

</div> 

<footer class="site-footer"> 
    <!-- Footer stuff goes here --> 
</footer>

CSS

.page-wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -142px; 
} 
.page-wrap:after { 
    content: ""; 
    display: block; 
} 
.site-footer, .page-wrap:after { 
    /* .push must be the same height as footer */ 
    height: 142px; 
} 
.site-footer { 
    /* footer style */ 
}

來源

2014-04-25 09:37:55

所以我一直試圖讓這對我的cookie的通知欄，通常被放置在工作（參見http://www.corwouters.nl），使用z-index設置某種方式將其置於所有內容的頂部，直到被解散。但對於iOS我希望它放在底部。所以後來我偶然在其他網站得到這個用純CSS和JavaScript的沒有在所有的工作，所以我會在這裏分享這所有的你：

#sticktobottom { 
    position: fixed; 
    top: auto; 
    bottom: 0; 
}

*您div的名稱替換#sticktobottom ，頁腳，跨度或其他要粘貼到底部的元素。我檢查過它，它似乎適用於所有主流瀏覽器，包括iOS在內的桌面和移動設備。同樣在iOS上，它會在滾動時粘在導航欄上，這是所需的行爲。

來源

2016-04-18 11:21:04 DaveFlash

保持頁腳底部

回答

相關問題