3

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;}
4

5 回答 5

2

默认情况下，边框、边距和填充不是宽度/高度的一部分，而是添加在顶部。这就是为什么你会得到滚动条，因为盒子的全尺寸是 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 以获取有关 box-sizing 的详细信息。

于 2012-06-27T07:10:09.250 回答
2

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

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

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

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

于 2017-09-26T14:48:04.823 回答
1

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

于 2012-06-27T06:58:20.303 回答
1

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

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

这样做边框将被添加到 main 的 100% 高度。在此处了解有关盒子尺寸的更多信息

于 2017-09-26T14:59:19.357 回答
0

所以，你是说你不想显示滚动条？

CSS：

#main
{
    overflow: hidden;
    height: 100%;
    position: absolute;
    margin: 0px;
}
于 2012-06-27T03:08:55.820 回答