SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't Set Content Height To 100%

    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:

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi davede. Welcome to SitePoint.

    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:

    http://www.sitepoint.com/forums/1239966-post3.html

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

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by davede View Post
    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?
    Hi,

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

    Code:
    #content {
        background-color: #ccc;
        width: 968px;
        margin: 0 auto;
        /*min-height: 100%; can't use that here as there is nothing for it to work with*/
        padding: 20px;
        overflow: auto; /*don't know what this does! -  it contains floats*/
        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

    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. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by davede View Post
    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.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •