边框导致DIV溢出答案

【问题标题】：border cause DIV overflow边框导致DIV溢出
【发布时间】：2014-03-04 09:20:24
【问题描述】：

我有一个宽度为 80% 的根 div 和一个宽度为 100% 的孩子，当我向孩子添加一个边框时，会出现一个滚动条。我猜这是因为 100% 宽度 + 1px 边框溢出。我可以避免这样的问题吗？如何定义一个与父级一样宽的子级div，包括边框？

我需要它在 IE8 上运行

<div style="width:80%;overflow:auto;">
    <div style="float:left;width:100%;border-left:1px solid;">
        <div class="title">Title1</div>
        <div style="width:100%;">
            <div class="title">Title2</div>
            <div class="title">Title3</div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div>text</div>
    <div>text</div>
</div>

CSS

div.title {
    float: left;
    width:33%;
}

示例：http://jsfiddle.net/FN3mv/

【问题讨论】：

标签： html css

【解决方案1】：

将box-sizing: border-box 添加到您的100% 宽度元素中。

您还需要-moz-box-sizing: border-box。

【讨论】：

【解决方案2】：

您已将宽度指定为 100%，添加 1px 的边框将添加 2px + 100% 如果你需要边框，你需要另一个父 div

<div style="width:50%;overflow:auto;">
    <div style="border:1px solid;">
    <div style="width:100%;">
        <div style="float: left;width:50%;">AAA</div>
        <div style="float: left;width:50%;">BBB</div>
        <div style="clear:both;"></div>
        </div></div>
    <div>A1</div>
    <div>A2</div>
</div>

【讨论】：