2

我有一个父 div 和 child div。子 div 宽度设置为 100%。

两者都有 2px 的边框。

奇怪的是子 div 的左边缘出现了，而右边缘似乎被父级覆盖了div。

更改子 div 上的边距或父 div 上的填充似乎不起作用。

将子宽度调整为低于 100% 似乎可行，但不想这样做并且不知道为什么会这样？

小提琴：http : //jsfiddle.net/Boovius/8armB/2/

HTML

<body>
    <div id='parent'>
        <div class='child'></div>
    </div>
</body>

CSS

#parent {
    height: 550px;
    width: 400px;
    margin: 0 auto;
    border: 2px solid 
    overflow: scroll;
}
.child {
    width: 100%;
    height: 50px;
    border: 2px solid 
}
4

2 回答 2

1

默认情况下，边框包含在宽度计算中。更改（或简单地删除）您的宽度或您的盒子大小模式：

http://jsfiddle.net/isherwood/8armB/3/

.child {
    box-sizing: border-box;
}

http://css-tricks.com/box-sizing/

于 2013-10-04T20:53:15.873 回答
1

如果您不更改显示属性，则 div 将呈现为块元素，因此始终填充其父元素的整个宽度。取决于您的示例有多现实，但在这种情况下，只需删除 child 的宽度div。

http://jsfiddle.net/8armB/4/

于 2013-10-04T20:58:51.390 回答