220

In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display.

Here is my DEMO:

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
<form id="form1">
  <div id="header">
      <a title="Home" href="index.html" />
  </div>

  <div id="menuwrapper">
      <div id="menu">
      </div>
  </div>

  <div id="content">
  </div>
</form>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Razor
  • 17,271
  • 25
  • 91
  • 138
  • What do you want it to do if there is more content then can fit on the page? What browsers do you care about? – drs9222 Jul 25 '09 at 23:49

18 Answers18

122

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

html,body { height:100%; }

You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.

This site has some excellent examples:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

I also recommend going to http://quirksmode.org/

Gras Double
  • 15,901
  • 8
  • 56
  • 54
Jason Hernandez
  • 2,907
  • 1
  • 19
  • 30
69

I'll try to answer the question directly in the title, rather than being hell-bent on sticking a footer to the bottom of the page.

Make div extend to the bottom of the page if there's not enough content to fill the available vertical browser viewport:

Demo at (drag the frame handle to see effect) : http://jsfiddle.net/NN7ky
(upside: clean, simple. downside: requires flexbox - http://caniuse.com/flexbox)

HTML:

<body>
  
  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>
  
  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>
  
</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;
  
  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - or i'm just too sleepy

Lonnie Best
  • 9,936
  • 10
  • 57
  • 97
Gima
  • 1,892
  • 19
  • 23
  • 17
    Some of us are fortunate enough to only support "modern" browsers so this was incredibly useful to me. Thanks Gima. I tried several ways of doing something like this but it was always broken in various subtle ways. This is much better. Still don't exactly understand why it works this way. – Chris Nicola Jul 20 '14 at 05:13
  • 1
    Flexbox element tries to divide it's content area among the elements in it. The solution I offered works by 1) deny shrinking of divs, and 2) enable growing of .div2. Hence divs don't shrink to hide their content, and only .div2 is allowed to expand. – Gima Jul 20 '14 at 13:41
  • So this fixes the problem I was having in Firefox, where the content was still slightly too big for the browser. Unfortunately, in Chrome, this alone does not fix that problem. However, also setting the margin and padding to 0 does. – Michael Scheper Jul 26 '15 at 02:09
  • this is the correct answer, min-height: 100% works only if there is nothing more in the parent container, and calc isn't really helpng if the sibling above expanding element have unknown height – zakius Dec 11 '15 at 08:48
  • After hours struggling with this issue, this is the only solution that really fixed it for me. Only missing a little explanation of what each part does. But anyway, thank you so much @Gima. – lolog May 14 '17 at 14:59
  • Works in Opera 12. Good enough for me. /lol Edit: This should really be the accepted answer. – AnrDaemon Apr 30 '20 at 10:46
18

Try playing around with the following css rule:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Change the height to suit your page. height is mentioned twice for cross browser compatibility.

KyleMit
  • 30,350
  • 66
  • 462
  • 664
Kevin Read
  • 12,411
  • 1
  • 18
  • 9
  • this works, but I found that if I increase min-height to more than 600px, it creates a scroll. Would you have any idea why this is happening? – Siddharth Patel Dec 07 '14 at 14:23
  • 1
    @SiddharthPatel Because the #content div is overflowing its parent. So set the parent of the #content div to have an overflow:auto or overflow:hidden css value and it should expand/overflow to fit, rather than scroll. Would probably be better to pose such questions as new questions next time rather than comments :) – Colton McCormack Jan 20 '15 at 19:34
  • After trying each answer's method, this is the only one that works. Even this does work perfectly, because I have to adjust the height value to match the height of the page, so it takes tweaking. However, it does work equally for all browsers. – TARKUS Mar 06 '16 at 14:22
  • Thank you so much for this answer. It is simply and works well on multiple platforms. I had actually used this before without realizing about 1 year ago, wish I could upvote twice. – vedi0boy Nov 13 '16 at 13:08
  • Doesn't work on a page with dynamic height – jmona789 Jun 13 '23 at 15:27
9

you can kinda hack it with the min-height declaration

<div style="min-height: 100%">stuff</div>
Owen
  • 82,995
  • 21
  • 120
  • 115
5

You can use the "vh" length unit for the min-height property of the element itself and its parents. It's supported since IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
Nico
  • 343
  • 3
  • 7
4

While it isn't as elegant as pure CSS, a small bit of javascript can help accomplish this:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Adam Franco
  • 81,148
  • 4
  • 36
  • 39
3

Try Ryan Fait's "Sticky Footer" solution,

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Works across IE, Firefox, Chrome, Safari and supposedly Opera too, but haven't tested that. It's a great solution. Very easy and reliable to implement.

Anjisan
  • 1,789
  • 3
  • 15
  • 26
3

The min-height property is not supported by all browsers. If you need your #content to extend it's height on longer pages the height property will cut it short.

It's a bit of a hack but you could add an empty div with a width of 1px and height of e.g. 1000px inside your #content div. That will force the content to be at least 1000px high and still allow longer content to extend the height when needed

Gene
  • 1,517
  • 1
  • 14
  • 15
3

Sticky footer with fixed height:

HTML scheme:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
KyleMit
  • 30,350
  • 66
  • 462
  • 664
David Horák
  • 5,535
  • 10
  • 53
  • 77
3

Try:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Haven't tested it yet...

KyleMit
  • 30,350
  • 66
  • 462
  • 664
Steph
  • 31
  • 2
2

Try http://mystrd.at/modern-clean-css-sticky-footer/

The link above is down, but this link https://stackoverflow.com/a/18066619/1944643 is ok. :D

Demo:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
Vinicius José Latorre
  • 2,661
  • 1
  • 13
  • 6
1

I think the issue would be fixed just making the html fill 100% also, might be body fills the 100% of the html but html doesn't fill 100% of the screen.

Try with: 

html, body {
      height: 100%;
}
David Marciel
  • 865
  • 1
  • 12
  • 29
0

Also you might like this: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

It isn't quite what you asked for, but it might also suit your needs.

Dan
  • 61,568
  • 9
  • 61
  • 78
0

I dont have the code, but I know I did this once using a combination of height:1000px and margin-bottom: -1000px; Try that.

Alexander Morland
  • 6,356
  • 7
  • 32
  • 51
  • Wow, that actually works! But if the content overflows the container, it is not possible to see the overflowed part... – adripanico Jan 16 '18 at 13:37
0

Depending on how your layout works, you might get away with setting the background on the <html> element, which is always at least the height of the viewport.

0

It is not possible to accomplish this using only stylesheets (CSS). Some browsers will not accept

height: 100%;

as a higher value than the viewpoint of the browser window.

Javascript is the easiest cross browser solution, though as mentioned, not a clean or beautiful one.

Martin
  • 2,347
  • 1
  • 21
  • 21
-1
#content {
    height: calc(100% - the amount of pixels the content div is away from the top);
}

So if your div is 200px from the top, the code you need would be

#content {
    height: calc(100% - 200px);
}
NHerwich
  • 110
  • 15
  • This only works if you know the height of the space away from the top, and is thus not generalizable. – David Jentjens Jul 04 '22 at 23:38
  • 1
    @DavidJentjens The question has fixed heights in `px` for all sibling divs and didn't ask for a generalized answer. So I think my answer would work in this case. Although yes, it is kind of a bad answer. – NHerwich Jul 05 '22 at 08:20
-2

I know this is not the best method, but I couldnt figure it out without messing my header, menu, etc positions. So.... I used a table for those two colums. It was a QUICK fix. No JS needed ;)

Wen-D
  • 15