使 div 保持在具有边距的父 div 内

Question

我一直在四处寻找解决这个问题，我还没有看到一个很好的答案来说明为什么会发生这种情况以及如何解决它.. 基本上我有一个 div 设置为 100% 的宽度和高度，在里面我有一个选项卡部分，就像在浏览器上一样，我在主要区域添加了边距和填充，当我将选项卡 div 设置为全宽时它会粘住出一些像素，在玩 % 和边距/填充时，处理子 div 伸出父 div 的正确方法是什么

<div class="appview_fullscreen app_ama">
 <center><strong>AMAMAMAMAMAMA</strong> </br>
    <i>AMAMAMA</i>
 </center>
<div class="main_area">
    <div class="tabs_area">

    </div>
    <div class="main_window">

    </div>
    <div class="troubleshoot_area">

    </div>
    <div class="timeline">

    </div>
 </div>
</div>


.appview_fullscreen
{
    width: 100% !important;
    height: 100%;
    background-color: black;
    color: white;
    font-size: 20px;
    margin: 0px;
}
.app_ama
{

}
.main_area
{
    border: 1px solid green;
    width: 100%;
    padding: 2px;
    margin: 0px;
}
.tabs_area
{
    border: 1px solid green;
    height: 20px;
    width: 100%;
}

演示：http://jsfiddle.net/S8RC3/

Answer 1

只需从DIV 元素中删除100%。

DEMO

.main_area{
    /* width:100%; Why? I'm a DIV! */
    border: 1px solid green;
    padding: 2px;
    margin: 0px;
}
.tabs_area{
    /* width:100%; Why? I'm a DIV! */
    border: 1px solid green;
    height: 20px;
}

DIV 作为一个 块级 元素已经像它的父容器一样宽。

另外你有一个错字：</br> 应该是<br />、<br/> 或<br>

Answer 2

对于您的内边距和边框，请使用box-sizing: border-box;。