Question

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

两者都有2px的边界。

奇怪的是，子div的左边缘显示，而右边缘似乎被父div覆盖。

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

将儿童宽度调整为低于100％似乎有效，但不想这样做而且不确定为什么会发生这种情况？

FIDDLE：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 
}

Answer 1

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

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

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

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

Answer 2

如果不更改display-property，则div将呈现为块元素，因此始终填充其父元素的整个宽度。取决于您的示例的实际程度，但在这种情况下，只需移除子div上的宽度。

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

当子宽度设置为100％时，仅从父div的子div的右侧奇怪重叠

2 个答案: