logo标签列表

如何将div定位在页面底部

jqueryhtmlcssposition
11
我该如何使用CSS或jQuery将<div>元素的定位设置在页面底部？
6个回答
11
4
如果网页长度超出了视窗，那么 div 将会覆盖内容。想要解决这个问题，请参考这个例子：http://matthewjamestaylor.com/blog/bottom-footer-demo.htm - grant
1
了解关于“例外情况”的另一个来源是CSS-tricks网站：http://css-tricks.com/snippets/css/sticky-footer/。 - blong
2
这个例子对于带有滚动条的页面不起作用。 - fortune
6
如果您只需要这个，可以使用position:absolute;bottom:0;。
2
在CSS中：position:absolute或position:fixed。
1
这个问题已经有了答案，但为了让非 CSS 专家更好地理解，我想再多解释一下：
给定 HTML：
<html>
  <body>
    <p>Some content</p>
    <div class="footer">down there</div>
  </body>
</html>

然后是以下的CSS

div.footer {
  position: absolute;
  bottom: 0;
  right: 0;
}

该代码会将文本定位在您的视口（浏览器窗口）的右下角，滚动页面将移动页脚文本。

如果您使用

div.footer {
  position: fixed;
  bottom: 0;
  right: 0;
}

另一方面，页脚将保持在您的视口底部，即使您滚动。顺便说一下，同样的技术也可以使用 top: 0 和 left: 0 来定位一个元素在左上角。
1

position:fixed;与bottom:0;的组合对我有效。

0

我认为你可以做到这一点：

    html{
      min-height:100%;
      position:relative;
      background-color:red;
    }
    .footer{
      bottom:0;
      position:absolute;
      background-color:blue;
    }
<html>
  <body>
    <div class='footer'>
    <h1>I am Footer</h1>
    </div>
    </body>
  </html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接