ansaurus

Question

CSS: Is it possible to get a div that is 100% height, less a top and bottom margin?

Answer 1

A:

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

WishCow 2010-03-22 23:00:13

@poke wrote: "No, because padding and margin are added to the height/width. So this would make a 100%+40px height."

Marcel Korpel 2010-03-23 00:36:41

Answer 2

A:

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, as IE 6 will not render your div correctly when using both top and bottom.

2) You can change the box model to include borders at top and bottom within a 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 using

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

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

If you want to support IE 6, you'll have to use #2. So in IE 6 you can only use quirks mode when you want this (the only other option to support this in IE 6 is using CSS expressions, but they are very CPU intensive, as the J(ava)Script engine of IE must recalculate those widths and heights on every resize).

Marcel Korpel 2010-03-22 23:09:39

Does MS actually support `-ms-box-sizing`? I know that `-ms-box-radius` doesn't even work in IE8.

The Elite Gentleman 2010-03-22 23:16:20

@TheEl: According to the linked page (http://www.quirksmode.org/css/box.html), yes, and according to this (stupidly designed) PDF http://download.microsoft.com/download/F/F/E/FFEB6B00-64B9-450F-93B3-2781D9F36210/BoxSizing-DeveloperSeriesInformationPage.pdf, IE 8 supports both `box-sizing` and `-ms-box-sizing`.

Marcel Korpel 2010-03-22 23:57:02

Answer 3

A:

Its not precise like CSS but you could just add a BR tag outside the container at the top and bottom and adjust your 100% min margin to like 90-95%.

MaxGeek 2010-03-22 23:13:55

right. that works but it doesn't react well to resizes.

Cheeso 2010-03-23 13:34:01

Answer 4

A:

You could use a second div inside with a padding to realize the actual "outer" padding:

<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 don't display anything else, you can also use the body for the outer construction.

edit: Actually, you'll have to use min-height for the outer div, to keep the background working when your page is higher than 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"&gt;
<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>

poke 2010-03-22 23:14:35

Does this work on IE6? Anyway, does @Cheeso want to support IE6?

Marcel Korpel 2010-03-22 23:36:46

Iirc, IE6 doesn't support `min-height`, but I doubt there is any other method that would make this work (without using javascript of course). Every later browser does support it though.

poke 2010-03-23 00:09:22

I tried this and I don't get a margin on the div.

Cheeso 2010-03-23 13:30:03

Answer 5

+2 A:

Try absolute positioning:

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

It can be quirky in IE6 (what isn't?), but there are a lot of tricks to try if you google around. Some include adding a clear: both rule or wrapping your absolute-positioned div inside another div.

An overflow: auto should make the scrollbar behave as you have it pictured.

edit: Alternately, you could add 20px padding to a wrapper div, then set your container to height: 100% with no margin, and it should fill up to the padding of its wrapper.

keithjgrant 2010-03-23 15:42:47

This works, thanks!

Cheeso 2010-03-23 17:29:46

ansaurus

tags:

views:

answers:

CSS: Is it possible to get a div that is 100% height, less a top and bottom margin?

related questions