Странное совпадение только с правой стороны дочернего div от родительского div, когда ширина ребенка установлена на 100%

У меня есть родительский div и ребенок div. Ширина дочернего div равна 100%.Странное совпадение только с правой стороны дочернего 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 
}

источник

2013-10-04 Joshua Book

Border включена в ширину расчетов по умолчанию. Изменение (или просто удалить) вашу ширину или ваш коробчатой проклейки режим:

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.

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

источник

2013-10-04 20:58:51 Gigo

Странное совпадение только с правой стороны дочернего div от родительского div, когда ширина ребенка установлена ​​на 100%

ответ

Смежные вопросы

Странное совпадение только с правой стороны дочернего div от родительского div, когда ширина ребенка установлена на 100%