在HTML中，我怎样才能有一个边框并填充容器？

问题描述：

以下代码片段显示了正文中的div。两者的高度和宽度均为100％。该div有一个边框。问题在于浏览器使div的内容框与主体大小相同，从而将底部和右侧边框发送出去。我有义务保持100％的规则，整个布局取决于他们。我怎样才能让我的边框出现？我究竟做错了什么？在HTML中，我怎样才能有一个边框并填充容器？

西蒙

<html> 
    <body style="width:100%;height:100%;"> 
     <div id="bdiv" style="height:100%;width:100%;border:2px solid green;">Difficult to remain positive in such conditions</div> 
    </body> 
</html>

答

1）清除体内的默认保证金

2）设置box-sizing: border-box;股利让边框是div

body 
{ 
    margin:0; 
} 
div 
{ 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

FIDDLE

内呈现

正确！ [** DEMO **]（http://jsfiddle.net/gM8Tb/） – Ruddy

请注意，Firefox *仍不支持此功能，并且您必须在其中使用'-moz-box-sizing：border-box'。 –

谢谢@NiettheDarkAbsol - 我补充说 – Danield

在HTML中，我怎样才能有一个边框并填充容器？

相关推荐