在主div（或主体）上获得100％高度/宽度边框

Question

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

我已经设置了我的html，容器，主要和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

我知道这是一个旧帖子，但它出现在谷歌的第一页......这是我的解决方案，似乎可以很好地跨浏览器：

height: 0:
border-style: solid;
border-width: 8vw 0 0 100vw;
border-color: transparent transparent transparent red;

只是用它来：在伪元素之后为了把它变成三角形并且它工作得很好（测试到ie10）。

只需使用100vw而不是100% ，它应该可以解决问题。

Answer 2

您在寻找固定边框还是动态边框？ 你的代码的问题是W3C盒子模型。 在默认模型中，填充，边距和边框将添加到元素的大小。 所以在你的代码中，你真正告诉它的是“让盒子100％然后再添加10px的边框”。

通常情况下，一个简单的改变是手动切换盒子模型，但不幸的是，该属性不适合height: 100% 。 所以你有几个选择：

1）如果你正在寻找一个固定的边框，这是一个很好的技巧： http ： //css-tricks.com/body-border/ 2）如果你需要一个动态边框，你需要以某种方式绕过额外的高度边界增加。 这是一种方式：

html,body { height:100%; padding: 0; margin: 0; }
#container {
    min-height:100%;
    border-right: 5px solid #000;
    border-left: 5px solid #000;
    position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
    height: 100px;
    border-top: 5px solid #000;
    background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
    height: 100px;
    border-bottom: 5px solid #000;
    background-color: blue;
    position: absolute;
    bottom: 0;
    width: 100%; /* with absolute position, a width must be declared */
} 

HTML

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

jsfiddle： http ： //jsfiddle.net/Qw2cb/

Answer 3

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

您可以将box-sizing属性设置为border-box ，它告诉浏览器在width / height属性中包含边框和填充的计算（与content-box相反，这是默认值）：

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

特别是IE8及其他浏览器系列的早期版本不支持此css-property，因此最好添加一些特定于浏览器的定义：

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

有关盒子大小的详细信息，请查看mozilla doku 。

Answer 4

那么，你是说你不想显示滚动条？

CSS：

#main
{
    overflow: hidden;
    height: 100%;
    position: absolute;
    margin: 0px;
}

Answer 5

你可以给box-size:border-box; 像'主'一样

#main{
    box-size:border-box;
}

这样做边框将被添加到主要的100％高度。 在此处了解有关盒子大小的更多信息