Height div 100% with a padding

css html height

10,236

You can try adding box-sizing:border-box onto any elements which you want to have 100% height and padding at the same time.

Works in IE8+ and the good browsers, so browser support is actually quite good

http://css-tricks.com/box-sizing/

10,236

Author by

steventnorris

Applications developer with a preference for object-oriented languages. Currently working at FortyAU, a development firm in Nashville, TN. http://www.fortyau.com

Updated on June 04, 2022

Comments

steventnorris almost 2 years

I have a setup requiring a div filling 100% of the screen with a margin of 10px. Inside that, there is a navigation pane at the top followed by a content div below with a padding and an inner content dive with a padding. However, using the 100% height of parent and then adding a margin/padding stretches the div to 100% + margin + padding. Is there a fix for this? I noticed the absolute positioning trick, but that messes up the flow of the other divs if I absolutely position my content div. It also makes the resizing and flow non-liquid. Any way to keep those things and still achieve my goal, preferrably with CSS and not javascript?

Code Below:

ASPX

<!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>
    <title>Untitled Page</title>
    <link rel="Stylesheet" href="test.css" />
</head>
<body>
    <div id="wrapper">
        <div id="navigation">
        </div>
        <div id="content">
            <div id="inner">

            </div>
        </div>
    </div>
</body>
</html>

CSS

html, body
{
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    background-color:Black;
}
#wrapper
{
    height:100%;
    margin:10px;
    background-color:Blue;
}
#navigation
{
    height:100px;
    background-color:Green;   
}
#content
{
    height:100%;
    padding:10px;
    background-color:Orange;
}
#inner
{  
    height:100%;
    width:100%;
    padding:5px;
    background-color:Lime;
}

steventnorris about 12 years

I wish. I'm developing for IE7. I neglected to mention that above. Thank you though. If I was in a better environment, that would work golden.
Mr Lister about 12 years

98% will work if you put the padding in % too. Otherwise, you can be sure that someone will find a situation where this won't work reliably!
steventnorris about 12 years

1) Still produces offset/stretching issues, even when using padding as a %. 2) The border also adds to the stretch effect, so essentially the same issue as margin/padding.
Gavin almost 11 years

This is great. I didn't realize box-sizing:border-box was supported in IE8. I'm extremely tired of the illogical default box modal and the amount of wrapper DIVs needed to accomplish seemingly simple things. I'll be applying this box modal to all elements from now on.