當兒童寬度設置爲100時，父子div的右側只有右側的奇怪重疊

我有父母div和子女div。子div寬度設置爲100％。當兒童寬度設置爲100時，父子div的右側只有右側的奇怪重疊

兩者的邊界都是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 
}

來源

2013-10-04 Joshua Book

邊框默認包含在寬度計算。變化（或者直接刪除）您的寬度或你的盒子上漿模式：

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

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

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

來源

2013-10-04 20:53:15 isherwood

偉大的答案 - 盒子大小是一個整潔的提示 –

如果不改變顯示屬性的div呈現爲塊級元素和因此始終填寫其父元素的整個寬度。取決於你的例子有多逼真，但在這種情況下，只需刪除子女的寬度div。

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

來源

2013-10-04 20:58:51 Gigo

當兒童寬度設置爲100時，父子div的右側只有右側的奇怪重疊

回答

相關問題