Make container div fills all layout with sticky footer

Question

I creating an new layout for a personal website.

I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)

This is my html:

<body>
    <!-- Wrap all page content here -->
    <div id="wrap">
        <!-- Begin page navigation -->
        <nav id="nav-container" class="navbar navbar-default container" role="navigation">
            <div class="container">
                <!-- Here I put a very normal Bootstrap 3 navbar -->
            </div>
        </nav>
        <!-- Begin page content -->
        <div id="main-container" class="container">
            <!-- All my content goes here! -->
        </div>
    </div>
    <!-- Begin page footer -->
    <footer id="footer" class="container">
        <div class="container">
        </div>
    </footer>
</body>

The Sticky Footer CSS:

html, body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -100px;
  /* Pad bottom by footer height */
  padding: 0 0 100px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 100px;
}

And the custom style for my layout:

body {
    /* Body's background will be grey */
    background-color: #C0C0C0;
}
#main-container {
    /* A box where I'll put the content will be white */
    background-color: #FFFFFF;
}
#wrap {
    height: 100%;
    min-height: 100%;
}
#main-container {
    min-height: 100%;
    height: 100%;
}

This code generate this layout:

LayoutNow

But, as you can see, the div #main-container don't grow 'till the end of the layout. The div keep with the height of his content.

What I want is that this div always fills the entire page, like this:

LayoutThen

Many solutions on internet said me to fix min-height to some tested value, but this way I'll not be able to keep my website responsive (it's very important to me keep my layout always responsive, that's the main reason I use Bootstrap 3).

Other solution goes to calculate the div height with javascript. Personally I don't like this solution. I whish I could solve this only by using CSS.

Someone knows how to solve this problem?

You can create the illusion of #main-container grow till the end by setting #wrap's background-color the same value as #main-container's. — Antonis Grigoriadis, Jan 09 '14 at 17:31
Yeah I have same problem over and over again but I believe its not possible to do just yet at least not with CSS and HTML — I am Cavic, Jan 09 '14 at 18:09
Hello guys, thanks for the help! @AntonisGrigoriadis, your solution is perfect! All I had to do was set my `#wrap` to have the same width as `#main-container` and put the background color. — Vinicius Garcia, Jan 10 '14 at 11:44
I actually can't believe that setting `#main-container` min-height won't work... someone knows the reason for that? — Vinicius Garcia, Jan 10 '14 at 11:46
Great idea @AntonisGrigoriadis thanks! My main container div had a semi transparent background so I had to use a transparent png background image for the parent div that matched the width and position of the main container. This obviously needs tweaking at smaller screen widths as the background image will not always adapt with the rest of the layout. — user1794295, Mar 03 '14 at 21:00
Glad that helped you @user1794295. vinigarcia87 I think that `min-height` doesn't work due to a reported bug. See this: http://stackoverflow.com/questions/8468066/ . By the way is my answer an acceptable solution to your problem? Should I post it as an answer for future readers to be helped? — Antonis Grigoriadis, Mar 05 '14 at 04:05
Yes, @AntonisGrigoriadis! Post your answer so I can accept it. Put this bug info too! Most important to me, I guess, is know why this not work the way I think it should... thank you! — Vinicius Garcia, Mar 05 '14 at 15:35

Dhiraj · Answer 1 · 2014-01-09T20:05:35.190

3

As long as you are working on percentage, your site will be responsive. So using min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.

See the JS Fiddle DEMO. Your container is filling the entire page.

#main-container {
    min-height: 100%;
    background: #fff;
}

edited Jan 09 '14 at 20:05

answered Jan 09 '14 at 19:09

Dhiraj

1,871
1
12
15

Hello, thanks for your help! unfortunately, my `#main-container` already have `min-height: 100%;` set, but it didn't work. :/ – Vinicius Garcia Jan 10 '14 at 11:40
1

@vinigarcia87 Try changing the height on `#wrap` to `height: 100%;`. Worked for me! – Richard Marskell - Drackir May 25 '14 at 12:56
1

@Morven You may want to mention that you need to specify height as `100%` instead of `auto`. Then, I think this is the correct answer. :) – Richard Marskell - Drackir May 25 '14 at 12:58

score 3 · Answer 2 · answered Jun 15 '14 at 11:43

If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.

To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="maincontainer" class="astable">
            <div id="header" class="astablerow">
                header
            </div>
            <div id="middlecontainer" class="astablerow">
                content
            </div>
            <div id="footer" class="astablerow">
                footer
            </div>
        </div>
    </body>
</html>

And here's the CSS

html, body{
    margin:0;
    padding:0;
    height:100%;
}
.astable{
    display:table;
    height:100%;
    table-layout:fixed;
    width:100%;
}
.astablerow{
    display: table-row;
}
#header{
    height:30px;
    background-color:#00ff00;
}
#footer{
    height:30px;
    background-color:#0000ff;
}
#middlecontainer{
   background-color:#ff0000;
}

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.

An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.

edited May 23 '17 at 12:09

Community

1
1

answered Mar 05 '14 at 19:00

Antonis Grigoriadis

2,060
2
16
26

1

As they pointed out in the link you gave, this is not a bug, this is exactly the way it is suppsed to work. Percentage heights are ignored when parent height is not strictly defined. 100% of auto gives you auto :) As a side note, I found a way to get a real fullheight container instead of faking it with background color. Check my answer below. – Gufino2 Jun 15 '14 at 11:47

Make container div fills all layout with sticky footer

3 Answers3