Footer below content, but not floating mid-air if

问题:

I got this code:

DEMO: http://jsfiddle.net/z21nz89d/2/

HTML:

  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <div class="container">
        <p>Here comes some content.</p>
        <p>Here comes some content.</p>
        <p>Here comes some content.</p>
        <p>Here comes some content.</p>
        <p>Here comes some content.</p>
    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <p>Some footer-content</p>
                    <p>Some footer-content</p>
                    <p>Some footer-content</p>
                </div>
                <div class="col-md-4">
                    <p>Some footer-content</p>
                    <p>Some footer-content</p>
                </div>
            </div>
        </div>
    </footer>

CSS:

footer {
    background-color: #eee;
    padding-top: 15px;
    padding-left: 15px;
}

It's kind of the very basic of what I have, but you'll get the point. As you can see the footer is positioned somewhere mid-air. I could position it absolute and make it sticky easily, but for various reasons I do not want that.

I want the footer to be BELOW the whole content (so to speak, listed as very last), however, if there's not enough content I need the footer to be placed at bottom: 0 and left: 0.

I have no idea how to accomplish this. My first guess would've been to use JavaScript to see how much space there is and whether the site is scrollable or not.

回答1:

This is the easiest way I have found to make a good footer. Wrap everything but your footer in a "wrapper" div. Then set your html and body height to 100%, with a min-height of 100% on your wrapper. Next, you need to give a bottom margin and bottom padding to this wrapper that is the same height as your footer. It works like a charm.

Demo here

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
footer {
    height: 100px;
}

回答2:

Solution with flex position here: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

回答3:

If you really want to do it the javascript way, you can achieve it with this code:

http://jsfiddle.net/z21nz89d/6/

$(function() {
    var windowHeight = $(window).height();
    var contHeight = $(".main-container").height();
    var footHeight = $("footer").height();
    var testHeight = windowHeight - footHeight;

    if (contHeight < testHeight) {
        $("footer").css("bottom", "0");
        $("footer").css("left", "0");
     }
}); 

Make sure to add the following css rules, the HTML, BODY stuff is very important.

html, body {
   height: 100%;
   width: 100%;
   min-height: 100%;
   padding: 0;
   margin: 0;
}

You will also have to wrap ALL your context EXCEPT for the footer in a div with a class of, let's say, "main-container", that way you can test the height of the entire body vs the height of the content minus the footer, understand?

It's all the JSFiddle.

Just note this really isn't the semantic way of doing this. A pure css sticky footer would be better in my opinion. If you can't use one, this will work.

回答4:

You can use this responsive css code and it is working in all browser's and it can changed according to browser size when browser can resized.

Live Working Demo

HTML Code:

<div id="wrapper">

    <div id="header">
        Header is here
    </div><!-- #header -->

    <div id="content">
        Content is here
    </div><!-- #content -->

    <div id="footer">
        Footer is here
    </div><!-- #footer -->

</div><!-- #wrapper -->

CSS Code:

  html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:10px;
    text-align:center;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
    text-align:center;
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    text-align:center;
}

Result:

回答5:

If the height of the footer is unknown, it's best to use flex, something in the lines of:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

And for CSS only this is needed:

body { 
   display: flex;
   min-height: 100vh;
   flex-direction: column;
}
.content {
   flex: 1;
}

And you don't need to set display:flex to body, it can be a wrapper inside the body too.

Keep in mind this might not work as expected on IE (see CanIUse link below). It works pretty good for most now though!

CanIUse link
See this link for an example.