Question

我有一个结构相似的页面：

<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>

虽然内容中没有很多内容，但是当它添加了更多文本时，页脚开始表现得非常奇怪，最终只是飞到了页面的中间。我已尝试在网上发布一些解决方案，但似乎没有一个解决方案，或者我只是做错了什么。无论如何，希望我能在这里找到一些帮助

Answer 1

以下是没有定位的粘性页脚的最佳解决方案：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/

*/

Answer 2

也许尝试这样的事情：

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 */
}

Answer 3

你可以在你的css中使用这样的东西

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

Answer 4

所以我一直试图让我的cookie工作通常位于页面顶部（参见http://www.corwouters.nl），z-index设置为某种方式把它放在一切之上直到被解雇。但对于iOS，我希望它放在底部。所以我偶然发现了另一个网站，它使用纯css并且根本没有javascript，所以我会在这里为大家分享这个：

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

*将#sticktobottom替换为您希望粘贴在底部的div，footer，span或其他元素的名称。我已经检查了它，它似乎适用于所有主流浏览器，桌面和移动设备，包括iOS。同样在iOS上，它会在滚动时粘在导航栏上，这是所需的行为。

将页脚保持在底部

4 个答案: