在主 div（或主体）上获得 100% 的高度/宽度边框答案

【问题标题】：Getting a 100% height/width border on main div(or body)在主 div（或主体）上获得 100% 的高度/宽度边框
【发布时间】：2017-09-27 00:14:01
【问题描述】：

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

我已经设置了我的 html、容器、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;}

【问题讨论】：

标签： html css

【解决方案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。

【讨论】：

【解决方案2】：

我知道这是一篇旧帖子，但是当它出现在 Google 第一页时...这是我的解决方案，似乎可以跨浏览器正常工作：

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

只是将它用于 :after 伪元素，以便将其变成三角形，它工作得很好（测试到 ie10）。

只需使用100vw 而不是100% 就可以了。

【讨论】：

我确实知道。认为这可能对其他人有帮助！

【解决方案3】：

您是在寻找固定边框还是动态边框？您的代码的问题是 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/

【讨论】：

【解决方案4】：

你可以把box-size:border-box;给'main'，比如

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

这样做，边框将被添加到 main 的 100% 高度。 Learn more about box sizing here

【讨论】：

【解决方案5】：

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

CSS：

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

【讨论】：