Can't Set Content Height To 100%

HTML & CSS
1

Hi,

1st post here!

I’ve got a very newbie problem that I’ve been struggling to solve. I’m trying to set my content div to stretch all the way to the footer.

I’ve tried so many combinations of min-height, height etc. it is ridiculous.

Any help would be greatly appreciated. thank you.

Here’s the code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tester Home</title>

<style type="text/css">

* {
    margin: 0; /*sets the margin for all elements to zero*/
}

#wrapper {
    min-height: 100%;
    background-color: #000;
}
body, html {
    height: 100%; /*the height MUST be set here*/
}

#header_container, #footer_container {
    width: 100%;
    background-color: #8181F7;
}

#footer, #header {
    margin: 0 auto;
    width: 968px;
    padding: 20px;
}

#content {
    background-color: #ccc;
    width: 968px;
    margin: 0 auto;
    min-height: 100%;
    padding: 20px;
    overflow: auto; /*don't know what this does!*/
    padding-bottom: 100px; /*set some padding on the bottom in order to get the footer on screen without going over the top of the content*/
}
#footer_container {
    height: 100px;
    position: relative;
    margin-top: -100px; /*pull the footer up*/
    clear: both; /*don't know what this does!*/
}

</style>

</head>

<body>
    
    <div id="wrapper">
        <div id="header_container">
            <div id="header">
                <p>Header</p>
            </div>
        </div>
       
        <div id="content">
            <p>Content</p>
        </div>
    </div>
    
    <div id="footer_container">
        <div id="footer">
            <p>Footer</p>
        </div>
    </div>

</body>

</html>
2

Hi davede. Welcome to SitePoint. :slight_smile:

It’s not all that straightforward to have a 100% tall content div, as you have to ask “100% of what?” I’m not sure if you also want a footer below the content, but that’s often called a “sticky footer”, and solutions for this also account for 100% high content. Have a look at this post that explains what’s involved:

Whether you want the footer or not, it explains how to set height to 100%. :slight_smile:

3

Hi Ralph,

Thanks for the reply and pointing me in the right direction.

I believe I’ve already incorporated all those suggestions into the code including the sticky footer.

I can’t seem to find where my code has gone wrong.

Any suggestions?

4

Hi,

You obviously missed the section on 100% height as you can’t just set elements to scale to 100%.


#content {
    background-color: #ccc;
    width: 968px;
    margin: 0 auto;
  [B]  /*min-height: 100%; can't use that here as there is nothing for it to work with*/[/B]
    padding: 20px;
    overflow: auto; /*don't know what this does! - [B] it contains floats[/B]*/
    padding-bottom: 100px; /*set some padding on the bottom in order to get the footer on screen without going over the top of the content*/
}

The min-height:100% has nothing to base its height on as it can only base its height on a parent with a defined height. It doesn’t work if the parent is height:auto or based on content height or has a min-height in percentages). Indeed if it did work as you had it then that content section would be 100% high from where it starts and travel far below the bottom of the fold thus breaking the rest of the layout.

Suffice to say you can’t just say to an element start here and go to the bottom automatically :slight_smile:

100% height can only be achieved on the main container and not on inner elements. It’s a once only effect and everything has to be accomplished form the start by being creative or planning carefully.

The footer method you are using will be broken in a number of browsers anyway so I suggest you use the method in the css faq as it works everywhere.

If you want a full width header and footer but a centred container then you are going to need something more complex like this. It uses an image for the left equal column but you can remove that if you just want a solid coloured background. The ony downside of this method is that both the footer and header must have a known height so that you can make the right calculations with the negative margin on the wrapper.

5

Paul you are an absolute genius!

thank you so much for helping out and dedicating your time to helping a hopeless newbie like myself.

I read through (thoroughly this time) the recommended docs and have used your sticky footer suggestion to use the top border (from the css faqs).

I never realised that the 100% height ‘appearance’ of pages was just an illusion using the wrap!

Thanks again.

6

It’s a common misconception and although 100% height seems simple at first, the more you think about it you realise why it can’t work as you first thought.

I wish there was an easy way to make inner elements maintain the height of the tallest element but that can only be done using display:table properties for ie8+ and isn’t always a suitable choice.

There are other methods to make equal columns but all use some sort of trickery.:slight_smile: