html - 在主 div(或正文)上获得 100% 高度/宽度边框

Question

http://designobvio.us/vodka/现场演示

我已经设置了我的 html、container、main 和 100%，但是无论我做什么我都无法在没有滚动条的情况下将边框设置为 100% 高度？

如何实现效果？

HTML

  <div id="main">

  </div>

CSS(目前不是实时代码，但这是我试过的)

html, body{height:100%; width:100%;} 
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}

Answer 1

默认情况下，边框、边距和填充不是宽度/高度的一部分，而是添加在顶部。这就是为什么你会得到滚动条，因为框的完整尺寸是 100% 的高度和宽度加上边框宽度。

您可以将 box-sizing 属性设置为 border-box，这会告诉浏览器在宽度/高度属性(在与 content-box 相反，这是默认值):

#main {
    box-sizing: border-box;
    [...]      
}

尤其是 IE8 和其他浏览器系列的早期版本不支持此 css 属性，因此最好也添加一些特定于浏览器的定义:

#main {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing:     border-box;
    box-sizing:        border-box;
}

看看 mozilla doku for detailed information on box-sizing .