页面

Question

我有两个divs包含在更大的div中，如下所示：

<div class="content-container">
    <div id="content">
    Bunch of text ... omitted
    </div>

    <div id="sidebar">
    </div>
</div>

与这两者相对应的css如下（略微编辑长度）：

#content {
margin: 0;
padding: 15px;
width: 720px;
height: 100%;
position: absolute;
left: 0;
border-left: solid;
overflow: auto;
}

#sidebar {
margin: 0;
padding: 15px;
width: 198px;
position: absolute;
right: 0;
height: 100%;
background-color: white;
border-style: solid;
}

.content-container {
position: relative;
width: 978px;
height: 1060px;
}

我read表示width属性不包含填充。当我在Chrome中加载页面并检查元素时，content的宽度为705，而不是预期的720.但是，sidebar的宽度正确为198px。有人有解释吗？

Answer 1

  

有没有人有解释？

这是因为滚动条（由overflow: auto生成）。

有一些与滚动条相关的跨浏览器不一致以及它如何包含在宽度计算中。在Chrome和Safari中，滚动条的宽度不包含在内容宽度中，而在Firefox和IE中，滚动条的宽度包含在内容宽度中。

在您提供的jsFiddle示例中，删除滚动条后，您会注意到Chrome中的内容宽度为717px。使用滚动条，将从内容宽度中减去15px（生成702px）。

Answer 2

尝试清除父div的任何可能的默认边距或填充：

.content-container {
  margin:0px; 
  padding:0px;
}