CSS: Is it possible to get a div that is 100% height, less a top and bottom margin?_问答_开发者

I can get a 100% height div, 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: 10开发者_如何转开发0%; }
      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:

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

When I say "100% height" - I mean it stays full height regardless of how much content is in the div, and regardless of how the window gets resized.

But is it possible to get a div with a height of "almost 100%" height? If I want margins at the top and bottom, can I do that?

I want it to look like this:

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

I can do this with Javascript+CSS. Can I do it with just CSS?

Answer:

Yes, it's 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:

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

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

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.

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

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%.

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">
<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>

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).