粘性页脚，或更确切地说：内容不会延伸到页脚 [英] Sticky footer, or rather: content doesn't stretch down to footer

问题描述

所以我想在页面上添加一个粘滞页脚，并获得
水平展开结果部分，以更清楚地看到发生了什么。

So I wanted a sticky footer on a page and got this one to work for me. All is well, but no, not really..

The problem is that I wanted the content above the footer to stretch all the way down to it. Now the box containing the main content end just after the text in the box, and there's a large space between the footer and the content. What I want is the background of the main content to stretch down to the footer! See my beautiful image!

This is what I have right now in html:

<div id="wrap">
  <!-- start header -->
    <div id="header">
      <div id="header-content">
      </div>
    </div>
  <!-- end header -->

  <!-- start main -->
  <div id="main">
    <div id="main-content">
    </div>
    </div>
  <!-- end main -->
</div>
<!-- start footer -->
<div id="footer">
</div>

And in css:

html {
   height: 100%; }

body {
  height: 100%;}

 /* wrap */
 #wrap {
   min-height: 100%; }

/* main */
 #main {
   background-color: #43145c;
   overflow: auto;
   padding-bottom: 50px; }

 #main-content {
   width: 720px;
   margin: auto;
   background-color: #643280;
   padding-top: 20px; }

#footer {
  position: relative;
  margin-top: -50px;
  height: 50px;
  clear: both;
  background: red; }

I tried setting min height of main to 100%, but didn't work. I just want the backgroundcolor of main-content all the way down to footer, since it's different to the body and main box.

Does it make any sense? Can anyone help?

解决方案

I know this was asked 6 months ago, but I've been searching for the solution to this problem for quite a while now and hope other people can benefit from the solution I employed being archived. You were spot on when you said that somehow the main box needs to get the min-height of the space between the header and footer.

Unfortunately, I don't know how this can be done with pure CSS, it's quite easy with javascript of course but that solution is not always viable, and it's kind of messy in terms of code separation. The good news is that depending on what you need to do, there is a CSS hack you can employ.

What I did was add an absolutely positioned element below body that essentially stretched from below the header to above the footer.This way I could add a background or a gradient on this #divBelowBody that essentially allowed me to pretend this problem is solved (although this solution leaves a bitter taste in my mouth).

In addition, if you wanted to add a border around your content div and were hoping that it extended to the footer even when content was small, you're screwed (although not really, I can probably think of a hack or two to make this workable), so it only works if you were hoping to add a background or gradient etc.

You can see the code in action here: http://jsfiddle.net/qHAxG/ Expand the result section horizontally to more clearly see what's going on.

这篇关于粘性页脚，或更确切地说：内容不会延伸到页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！