发表新帖
发表新帖

How to position div at the bottom of a page

前端 未结
关注
6 1085
小蘑菇
小蘑菇 2020-12-19 00:00

How can I set position of a

to the bottom of page with either CSS or jQuery?

相关标签:
6条回答
  • 清酒与你
    2020-12-19 00:38

    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)
  • 一生所求
    2020-12-19 00:38

    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)
  • 长发绾君心
    2020-12-19 00:40

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

    0 讨论(0)
  • 挽巷
    2020-12-19 00:41

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

    0 讨论(0)
  • 滥情空心
    2020-12-19 00:42

    Use position:absolute and bottom:0

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

    0 讨论(0)
  • 自闭症患者
    2020-12-19 00:49

    in css: position:absolute or position:fixed

    0 讨论(0)
 看不清?
提交回复
热议问题