Search code examples
htmlcssbackgroundfooter

Body background and footer on bottom of page

I can't find a solution to this issue. I would like to have a footer that's always at the bottom (not sticky/fixed), and also a background that's always at the bottom (not sticky/fixed).

I made a picture to make it more clear: https://i.sstatic.net/fe9ZO.png

<html>
 <div id="container">
  <div class="content">
   <h1>Content</h1>
  </div>
  <div class="footer">
   <h2>Footer</h2>
  </div>
 </div>
</html>

CSS: 

html, body { height: 100%; }

body { display: flex; flex-direction: column; background: url('http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg') no-repeat bottom center; }

#container { display: flex; flex-direction: column; height: 100%; }

.content { max-width: 800px; width: 100%; height: 400px; margin: 0 auto; background: #eee; margin-top: 20px; text-align: center; padding-top: 30px; }

.footer { max-width: 800px; width: 100%; height: 100px; background: #000; margin: auto auto 0 auto; }

I also made a codepen: https://codepen.io/nickm10/pen/XVJjGb

Anyone know the solution?

Thanks!

Solution

  • Since you are already using flexbox layout. There is something called as flex-grow (The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container).

    Just give:

    .content{
    -webkit-flex-grow: 1;    
    flex-grow: 1;
   /** remove height **/
}

    and remove height from .content.