Question

我已经设置了我的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 here：http://jsfiddle.net/Qw2cb/

Answer 3

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

您可以将box-sizing属性设置为border-box，告诉浏览器在宽度/高度属性中包含边框和填充的计算（与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 for detailed information on box-sizing。

Answer 4

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

CSS：

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

Answer 5

您可以将box-size:border-box;提供给＆＃39; main＆＃39;，例如

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

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

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

5 个答案: