Geek Answers Handbook

CSS: Is it possible to get a div that is 100% of the height, smaller than the top and bottom margins?

I can get a div at 100% height, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>T5</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"> </link> <style type="text/css"> * { padding: 0; margin: 0; } html, body { height: 100%; } body { font-family: "lucida sans", verdana, arial, helvetica, sans-serif; font-size: 75%; } h1 { font-weight: bold; font-size: 1.4em; padding: 10px 10px 0;} p { padding: 0 10px 1em; } #container { min-height: 100%; background-color: #DDD; border-left: 2px solid #666; border-right: 2px solid #666; width: 280px; margin: 0 auto; } * html #container { height: 100%; } </style> </head> <body> <div id="container"> <h1>100% Height Div</h1> <p>Lorem ipsum ...</p> </div> </body> </html>

It looks like this:

alt text

When I say "100% height" - I mean that it remains full height no matter how much content is in the div, and no matter how the window is resized.

But is it possible to get a div with a height of "almost 100%"? If I want margins above and below, can I do this?

I want it to look like this:

alt text

I can do this using Javascript + CSS. Can I only do this with CSS?

Answer:
Yes, it is possible with absolute positioning.

  #container { width: 380px; background-color: #DDD; border: 2px solid #666; position: absolute; top: 20px; /* margin from top */ bottom: 20px; /* margin from bottom */ left: 50%; /* start left side in middle of window */ margin-left: -190px; /* then, reverse indent */ overflow: auto; /* scrollbar as necessary */ }

Result:

alt text

Thanks keithjgrant for the answer . View all code at http://jsbin.com/otobi .

+6
html css
source share
5 answers

Try absolute positioning:

 #container { position: absolute; top: 20px; bottom: 20px; }

This may be weird in IE6 (which isn’t?), But there are many tricks to try if you google around. Some of these include adding a clear: both rule or wrapping your absolute positional div inside another div.

An overflow: auto should make the scroll bar behave the way you depicted it.

edit:. Alternatively, you can add a 20px padding to the div wrapper, and then set your container to height: 100% without a field, and it should fill before its wrapper is filled.

+4
source share

Not sure if I missed something, but why not add margin-top: 20px; margin-bottom: 20px margin-top: 20px; margin-bottom: 20px in #container if you want to get margins?

0
source share

Two options:

1) You can use something like

 #theDiv { top: 16px; bottom: 20px; }

but this will only work on standards-compliant browsers and IE> = 7, since IE 6 will not display your div correctly when using both top and bottom .

2) You can change the box to include borders on the top and bottom inside the given height . Use something like

 * { box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; /* IE >= 8 */ }

so you can fake top and bottom with

 #theDiv { border-top: 16px; border-bottom: 20px; }

and put IE 6 and 7 in quirks mode (by putting something, like an HTML comment, before the DOCTYPE) to use the border-box window model.

If you want to support IE 6, you will have to use # 2. Thus, in IE 6 you can only use quirks mode if you want to (the only option to support this in IE 6 is to use CSS expressions, but they are very processor intensive , since the J (ava) Script IE engine must recalculate these widths and heights with every resize).

0
source share

Not as accurate as CSS, but you can just add a BR shortcut outside the container top and bottom and adjust your 100% minimum to 90-95%.

0
source share

You can use the second div inside with the add-on to implement the actual "external" add-on:

 <div style="height: 100%; width: 500px; margin: 0 auto; background: #CCC; border: solid #999; border-width: 0px 2px;"> <div style="padding: 20px 0px;"> Content here </div> </div>

Alternatively, if you are not showing anything, you can also use body for the external construct.

edit: In fact, you will have to use min-height for the outer div to preserve the background effect when your page exceeds 100% of the screen size. This, for example, works fine:

 <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> <style type="text/css"> html { height: 100%; padding: 0; margin: 0; background: #FFF; } body { min-height: 100%; margin: auto; width: 500px; background: #CCC; border: solid #999; border-width: 0 2px; } div#main { padding: 20px 15px; } </style> </head> <body> <div id="main"> <h1>100% Height Div</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p> </div> </body> </html>
0
source share

More articles:


All Articles