Question

我有一个#box的框，宽度为：100％，高度：100％，填充：5px，边距：5px; border：5px;

我需要在HTML5布局中正确显示它。

现在我有了：

enter image description here

但我需要在身体区域适应阻滞。

代码：

<!DOCTYPE html>
    <style>
    body,html {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #box {
        width: 100%;
        height: 100%;
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
    }
    </style>

    <body>
    <div id="box">
    Text will be here
    </div>
    </body>

Answer 1

浏览器确实夸大了你告诉他的事情:) 但是我觉得你不喜欢它的溢出。

由于您的边框和填充，您的#box会展开。您可以使这些属性插入，因此它不会扩展您的元素。您可以使用box-sizing：

执行此操作

 #box {
     width: 100%;
     height: 100%;
     border: 5px solid red;
     padding: 15px;
     /*margin: 20px;*/
     box-sizing: border-box;
 }

但是你不能对margin做同样的事情，因为元素正在从身体中推动自己：它做了它想要做的事情。

您可以通过执行与上述相同的操作来制定解决方法：

body
{
    padding: 20px;
    box-sizing: border-box;
}

您将使用身体上的填充而不是#box上的边距。

jsFiddle

<强>更新

为了防止双填充空间，你应该只将它应用于body元素（或html，但我更喜欢body，因为它最终是你的视觉元素）。

Answer 2

根据w3c specs for Box Model

框类型元素的渲染宽度等于其宽度，左/右边框和左/右填充的总和。

这意味着padding和border-width的值会影响元素的总宽度。因此，您在这里添加填充的15px以及5px个边框，其中元素的实际宽度为100％。

总的来说，它超过了寡妇的大小，这就是为什么它带有水平滚动。

Answer 3

您应该使用CSS box-sizing属性：

#box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
}

但请注意，您需要使用零margin才能生效。

有关如何运作的好解释性文章：http://css-tricks.com/box-sizing/

使用CSS3，您可以使用透明边框替换带有插入border-shadow的边框和边距。这样您就可以控制所有这些参数：填充，（假）边距和边框：

#box {
    width: 100%;
    height: 100%;
    padding: 15px;
    border:20px solid transparent;
    box-sizing:border-box;
    -webkit-box-shadow: inset 0px 0px 0px 5px #f00;
    box-shadow: inset 0px 0px 0px 5px #f00; 
    -moz-box-sizing:border-box;
}

在这里看到一个活泼的小提琴：http://jsfiddle.net/HXR3r/

Answer 4

您可以使用css calc（）

#box {
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
        width: calc(100% - 80px);
        height: calc(100% - 80px);
    }

Answer 5

<强> fiddle

你的问题是，你注意到的，假设仅为height s

height:100%;
border: 5px solid red;
padding: 15px;
margin: 20px;

这使得高度= 100％+边框（2 x 5）+填充（2 x 15）+边距（2 x 20）= 100％+（10 + 30 + 40）px

超过100% ...因此没有fit block in body area.。尝试以百分比减少高度，以获得更好的结果!!

类似宽度的情况!!

Answer 6

您需要在box-sizing: border-box;中添加添加#box属性并移除margin: 20px;

这是更新的CSS：

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
#box {
    width: 100%;
    height: 100%;
    border: 5px solid red;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

working fiddle

带有填充和边距以及100％宽度的HTML CSS Box？

6 个答案:

jsFiddle