代码之家 › 专栏 › 技术社区 › Cheeso

CSS:有没有可能得到一个100%高的div,减去上下边距?

css html

Cheeso · 技术社区 · 14 年前

我可以得到一个100%高度的div,像这样:

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

但有没有可能得到一个高度“几乎100%”的div呢?如果我想在顶部和底部留边距,我可以这样做吗?

我希望它看起来像这样:

回答:
是的,绝对定位是可能的。

  #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 */
  }

结果:

to keithjgrant for the answer . 查看所有代码 http://jsbin.com/otobi

5 回复 | 直到 5 年前

keithjgrant 14 年前

尝试绝对定位:

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

clear: both 规则或将绝对位置的div包装到另一个div中。

overflow: auto 应该使滚动条的行为,因为你有它的图片。

编辑: 或者,您可以向包装器div添加20px填充,然后将容器设置为 height: 100% 没有边距,它应该填满包装纸的填充物。

K. Norbert 14 年前

margin-top: 20px; margin-bottom: 20px 到 #container ,如果你想要利润?

MaxGeek 14 年前

它不像CSS那样精确,但是你可以在容器的顶部和底部添加一个BR标签,然后将你的100%最小边距调整到90-95%。

poke 14 年前

您可以使用第二个div inside和一个padding来实现实际的“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>

body 外部结构。

编辑: 实际上,你得用 min-height

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

Marcel Korpel 14 年前

两种选择:

1) 你可以用

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

但这只适用于符合标准的浏览器和IE>=7,因为使用这两种方法时,IE6将无法正确呈现您的div top bottom .

2) 你可以改变主意 box model 在顶部和底部包括边框 在内部 给定的 height . 使用类似

* {
    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 */
}

顶部 底部 使用

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

border-box 盒子模型。