Sticky footer, or rather: content doesn't stretch down to footer

不打扰是莪最后的温柔 提交于 2019-11-30 20:46:30

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.

Try this:

Replace your HTML and BODY Styles in the Style Sheet with this:

html,body {height: 100%;}

Then replace your "wrapper" with this:

#wrap { min-height: 100%;
height: auto; }

Hope that helps.

Try this

HTML

<body>
  <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 class="push"></div>
  </div>

  <!-- start footer -->
  <div id="footer">
  </div>
</body>

CSS

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
          height: 100%;
        }

        /* wrap */
        #wrap {
            background: green;
            height: auto !important;
            margin: 0 auto;
        }

        #wrap,
        #main, 
        #main-content {
            margin-bottom: -50px;
            min-height: 100%;
            height: 100%;

        }

        /* main */
        #main {
            background-color: #43145c;
        }

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

        .push, #footer {
            height: 50px;
        }

        #footer {
            position: relative;
            background: red;
        }​

see THIS demo: it might be of use. It seems like you want a div with a background color to stretch to the bottom. But the problem with the sticky footer is that it stays at the bottom also - get's out of your way when the content extends past the view-port. So It needs some distance ( height of the content ) to know how when to do that. If that height isn't designated by actual content... 100% isn't really going to do the trick either. because then the "sticky" footer doesn't really work... it would be off the screen. What is it really 100% of ?

this whole thing has frustrated me for a year... but I always find a way to make it look the way I want even if I can't get it to function the way I want... hopefully that link demo above will maybe lend another piece to the puzzle. Good Luck !

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!