为什么div和表在给定宽度= 100%时表现不同？

Question

为什么div和表在给定宽度= 100%时表现不同？

这是我的代码,简化为相关部分:

<html><head><title></title>
<style type="text/css">
body { background-color: #fff; }
#titlebar{ border: solid 1px black; margin:10px; }

#bodyWrapper{ float: left; width: 100%; }

#bodyColumn{ margin-left: 230px; height:500px; }

#menuColumn{
    float: left;
    width: 230px;
    border: solid 1px black;
    margin-left: -100%;
    height:500px;
}

.bigContent{ width: 100%; margin:10px; }

.section{
    border: 1px solid black;
    padding:10px;
    overflow: auto;
}
</style></head><body>

<div id="titlebar">Title</div>
<div id="bodyWrapper"><div id="bodyColumn">

<table class="section bigContent"><tr><td>FIRST</td></table></table>
<div class="section bigContent">SECOND</div>

</div></div>
<div id="menuColumn">MENU</div>
</body></html>

Run Code Online (Sandbox Code Playgroud)

我的问题:

的<div>含有"SECOND"是比更宽的<table>含"FIRST"虽然两者都是兄弟姐妹和具有width=100%经由同一CSS类
该<div>也比屏幕宽,导致出现滚动条

为什么这样,我该怎么做才能解决它？

注意:我在Firefox 3.6和IE 8中都遇到了同样的问题

Answer 1

Arn*_*anc 8

这是因为padding.在CSS中,width属性适用于元素的内容框,没有填充.

请参阅http://www.w3.org/TR/CSS21/box.html:该width属性适用Content于以下架构中的块:

因此外部元素的宽度是父级宽度的100%,加上左侧填充的10px和右侧填充的10px.

鉴于此元素是块元素,因此不必将其宽度指定为100%.

所以解决方案是:

不设置宽度
在设置宽度时考虑填充(这里需要设置填充%,例如填充的2%和96%的宽度(100-2*2)

归档时间：	15 年，1 月前
查看次数：	267 次
最近记录：	15 年，1 月前