Question

这是我的代码，简化为相关部分：

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

我的问题：

包含“SECOND”的<div>比包含“FIRST”的<table>宽，尽管两者都是兄弟姐妹，并且width=100%通过相同的CSS类
<div>也比屏幕宽，导致滚动条显示

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

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

Answer 1

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

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

因此外部元素的宽度是父级宽度的100％，加上左边填充的10px和右边填充的10px。

鉴于此元素是块元素，因此不必将其宽度指定为100％。

所以解决方案是：

不设置宽度
在设置宽度时考虑填充（这里需要在%中设置填充，例如2％的填充和96％的宽度（100-2 * 2）

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

1 个答案: