1

Possible Duplicate:
How to make the web page height to fit screen height

I've an HTML page that doesn't take up the whole screen. It just takes the size of the HTML content & the footer is not at the end of the page (as it should be)

How can I fix it?

I just need the footer to be at the end of the page.

My HTML structure is as follows:

<body>
    <div id="app">
        <!-- Header -->
        <div id="header"></div>
        <!-- Hero container -->
        <div class="container">
            <!-- Sub container -->
            <div class="container"></div>
        </div>
        <!-- Footer -->
        <div id='footer'></div>
    </div>
</body>

My CSS is as follows:

html {
    height: 100%;
}

body {
    color: hsl(0, 0%, 33%);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    background: none repeat scroll 0 0 hsl(0, 0%, 98%);
    margin: 0;
    padding: 0;
    height: 100%;
}

* {
    outline: 0 none;
}

#app {
    min-height: 100%;
    margin:auto;
    width: 100%;
}

div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,big,cite,code,del,dfn,em,img,small,strike,strong,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tr,th,td,embed,menu,nav
    {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

.container {
    margin: 0 auto;
    position: relative;
    width: 990px;
}

#footer {
    margin: 100px 0 0;
}

Can anyone please guide me. I'm new to CSS. :( Stuck bad! :(

EDIT

Can it be because I have float in some of the div elements inside body?

EDIT 2

Strange thing is that even if the page is long and I scroll down, after the footer there's this small strip of white space which never goes. When I try to select the white space with Firebug, it shows me as the element.

Community
  • 1
  • 1
LittleLebowski
  • 7,691
  • 13
  • 47
  • 72
  • 1
    What you are looking for is a sticky footer: http://ryanfait.com/sticky-footer/ – Jared Nov 20 '12 at 16:05
  • What is your expected behavior if your content exceeds the height of the window? Will the footer appear at the bottom of the viewport or at the bottom of the page? I ask because you could use position:fixed or a different technique. – Mike Robinson Nov 20 '12 at 16:05
  • Related: http://stackoverflow.com/questions/8257311/modern-way-to-markup-100-height-layout-in-html5-and-css3 – twodayslate Nov 20 '12 at 16:07
  • See my answer on http://stackoverflow.com/questions/13180981/how-to-make-div-element-opaque/13181130#13181130 for sticky footer – Phil Nov 20 '12 at 16:14
  • @MikeRobinson, if the content exceeds the height of the window, the footer should appear at the bottom of the page & not the viewport. – LittleLebowski Nov 20 '12 at 16:14
  • @PhilNerd, I don't want it sticky by increasing it's z-index. I want it at the bottom of the page. I want the page to take up the whole screen. And the footer should be the last thing to be on that page. – LittleLebowski Nov 20 '12 at 16:15
  • You don't actually even need to have a z-index. That was just for a non scrolling sticky footer – Phil Nov 20 '12 at 16:18
  • @EmilVikström, I have already done what is mentioned in that post. Can you suggest edits on my CSS? – LittleLebowski Nov 20 '12 at 16:19
  • @PhilNerd, with your method, you make the footer position absolute and it shows up on the page always. I don't want that. :( – LittleLebowski Nov 20 '12 at 16:22
  • Sorry That was what it is supposed to do. Ill respond to this later if you are still unresolved (when I get time) =) – Phil Nov 20 '12 at 16:24

3 Answers3

0

One way would be using Jquery to set the minimum height of the app div to be the height of the screen, which means if the content doesnt fill the screen it will still fill that height. Something like this would probably do the trick:

$(document).ready(function() {

var screenHeight = $(document).height();

$('#app').css('min-height' , screenHeight);

});

Quinny
  • 209
  • 4
  • 9
0

You may need to tweak the style a bit to account for padding, but this has shown some potential in Chrome (I'm away from a windows machine right now). The trick to specifically assign "position: relative" to the container, and "min-height: 100%" to the body, otherwise it doesn't work.

<html>
    <head>
        <style type="text/css">
           body {
              min-height: 100%;
              padding: 0;
              margin: 0;
           }

           #app {
              min-height: 100%;
              position: relative;
           }

           #footer {
              position: absolute;
              bottom: 0;
              background: red;
              height: 100px;
              width: 100%;
           }

        </style>
    </head>

    <body>
        <div id="app">
            <!-- Header -->
            <div id="header"></div>
            <!-- Hero container -->
            <div class="container">
                <!-- Sub container -->
                <div class="container"></div>
            </div>
            <!-- Footer -->
            <div id='footer'>Content</div>
        </div>
    </body>
</html>
Mike Robinson
  • 24,971
  • 8
  • 61
  • 83
-3

If you only want to position your footer at the bottom of the screen, you do not need to worry about the page's height:

#footer {
    position:absolute;
    bottom: 0;
}
Jens
  • 2,050
  • 1
  • 14
  • 30
  • 2
    This causes issues when the user scrolls. – Jared Nov 20 '12 at 16:06
  • If there is something to scroll, yes. You also could use "fixed" instead of "absolute" (as Mike mentioned in the comments). But then the footer would always be visible. It all depends on what you want to achieve. – Jens Nov 20 '12 at 16:09
  • I don't want the footer to be visible all the time. – LittleLebowski Nov 20 '12 at 16:16