让div元素保持在父级div内，并留有边距

Question

我一直在寻找解决方法，但是没有找到一个好的答案来解释为什么会出现这种情况以及如何解决问题。基本上，我有一个设置为100％宽度和高度的

元素，里面有像浏览器中的选项卡一样的部分。我向主区域添加了margin和padding，当我将选项卡

设置为全宽度时，它会超出一些像素，处理百分比和margin/padding时，正确的处理子

超出父级

的方法是什么？

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

demo : http://jsfiddle.net/S8RC3/

- user3059823

---

我不确定你在哪里搜索过，但如果你在谷歌上搜索“子div比父div宽”，那么第一个结果是CSS tricks的一篇大文章。 - davidpauljunior

Answer 1

通过仅从 DIV 元素中移除 100％。

演示

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

- Roko C. Buljan

---

我还必须删除 min-width 和 min-height。 - Prometheus

@Prometheus 是的，如果你只需要覆盖之前应用的样式。谢谢分享。 - Roko C. Buljan

Answer 2

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

- sheng

---

边框框等于我的特定边框？1像素实心绿色？ - user3059823

@user3059823，no. border-box 会使得 width 和 height 属性包括 padding 和 border。不过，看起来 这个回答 可能更好一些。 :P - sheng

请访问以下网站以了解有关box-sizing的信息：http://caniuse.com/#search=box-sizing ，https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。 - Roko C. Buljan

@RokoC.Buljan 我应该找什么？还是那些链接是给 @user3059823 的？ - sheng

@ShengSlogar 因为这是一个社区网站，那些链接来自可靠的资源... 所以它适用于每个人。 - Roko C. Buljan

@RokoC.Bulijan 抱歉，我以为你试图纠正我犯的错误，因为你已经发布了一个没有使用盒模型的答案。此外，人们似乎在与帖子作者以外的人交谈时使用 @ 符号。 :) - sheng