发表新帖
发表新帖

How to push a footer to the bottom of page when content is short or missing?

前端 未结
关注
13 1293
囚心锁ツ
囚心锁ツ 2020-12-04 16:55

I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall e

相关标签:
13条回答
  • 我在风中等你
    2020-12-04 17:01

    Use a blank div with flex-grow:1 to fill unused spaced right before the footer.

    <body style="min-height: 100vh; display: flex; flex-direction: column;">

  Any content you want, 
  put it here. Can be wrapped,
  nested, whatever.

<div style="flex-grow:1"></div>

<!-- Any content below this will always be at bottom. -->

<footer>Always way at the bottom</footer>
</body>

    Extract the styles to css as needed. This works by setting <body> as display:flex;

    0 讨论(0)
  • 既然无缘
    2020-12-04 17:10

    Example : http://jsfiddle.net/AU6yD/

    html, body { height: 100%; }

#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}

body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }
    <div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="push"></div>
</div>
<div id="bottom">
    <div id="footer">
        Footer
    </div>
</div>

    0 讨论(0)
  • 我寻月下人不归
    2020-12-04 17:10

    I've solved same problem with jquery

        var windowHeiht = $(window).height();
    var footerPosition = $("#asd-footer").position()['top'];

    if (windowHeiht > footerPosition) {
        $("#asd-footer").css("position", "absolute");
        $("#asd-footer").css("bottom", "0");
        $("#asd-footer").css("width", "100%");
    }
    0 讨论(0)
  • 挽巷
    2020-12-04 17:11

    This is what I am doing for my page

    <h6 style="position:absolute; bottom:0;">This is footer at bottom of page without scrollbars</h6>

    0 讨论(0)
  • 温柔的废话
    2020-12-04 17:12

    I tried this and it works fine so far

    position:absolute;
bottom:0;
width:100%;

    or 

    position:absolute;
bottom:0;
left:0;
right:0;
    0 讨论(0)
  • 一整个雨季
    2020-12-04 17:13

    What I wanted was to have the footer be at the bottom of browser view ONLY IF the content was not long enough to fill up the browser window (non-sticky).

    I was able to achieve by using the CSS function calc(). Which is supported by all modern browsers. You could use like:

    <div class="container">CONTENT</div>
<div class="footer">FOOTER</div>

    the css:

    .container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 186px);
    min-height: -moz-calc(100% - 186px);
    min-height: calc(100% - 186px);
}

    Change 186 to the size of your footer.

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