How to position div at the bottom of a page

2019-01-26 06:12发布

站内问答 / jQuery
1098 6 5

How can I set position of a <div> to the bottom of page with either CSS or jQuery?

6条回答
Lonely孤独者°
2楼-- · 2019-01-26 06:44

The combination position:fixed; with bottom:0; works for me.

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
3楼-- · 2019-01-26 06:53

This has been answered already, but to give a little bit more context for non CSS-experts:

Given the HTML

<html>
  <body>
    <p>Some content</p>
    <div class="footer">down there</div>
  </body>
</html>

then the following css

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

will position the text at the lower right corner of your viewport (browser window). Scrolling will move the footer text.

If you use

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

on the other hand, the footer will stay at the bottom of your viewport, even if you scroll. The same technique can be used with top: 0 and left: 0 btw, to position an element at the top left corner.

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
4楼-- · 2019-01-26 06:54

You can use position:absolute;bottom:0; if that's all you want.

查看更多
0人赞 添加讨论(0) 举报
乱世女痞
5楼-- · 2019-01-26 07:01

I think you can do this:

    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>

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
6楼-- · 2019-01-26 07:06

Use position:absolute and bottom:0

Check working example. http://jsfiddle.net/gyExR/

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
7楼-- · 2019-01-26 07:06

in css: position:absolute or position:fixed

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)