在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>

來源

2014-03-27 bbsimonbb

1）清除體內的默認保證金

2）設置box-sizing: border-box;股利讓邊框是div

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

FIDDLE

內呈現

來源

2014-03-27 09:16:16 Danield

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

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

謝謝@NiettheDarkAbsol - 我補充說 – Danield

在HTML中，我怎樣纔能有一個邊框並填充容器？

回答

相關問題