Предположим для этого решения, что мы не знаем размеров родительского элемента div.
Картинка лучше всего иллюстрирует проблему:
Родительский div имеет черную рамку, а дочерний div имеет фиолетовую рамку такой же ширины. Дочерний элемент расширяется, чтобы заполнить родительский элемент (по желанию), но расширение не включает границы (нежелательно). Вместо этого дочерний элемент должен располагаться точно поверх родителя, как два сложенных друг на друга куска стекла точно такого же размера, чтобы родитель был полностью закрыт дочерним элементом.
Фрагмент, который создает изображение выше
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
.parent {
background: pink;
border: 3px solid black;
position: relative;
width: 100px;
height: 100px;
}
.child {
background: green;
border: 3px solid purple;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}<div class="parent">
<div class="child">
</div>
</div>Фрагмент дает правильные результаты, но недопустим, поскольку используются размеры родительских элементов div.
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
.parent {
background: pink;
border: 3px solid black;
position: relative;
width: 100px;
height: 100px;
}
.child {
background: green;
border: 3px solid purple;
position: absolute;
width: 100px; /* not allowed! should be 100% */
height: 100px;/* not allowed! should be 100% */
left: -3px;
top: -3px;
}<div class="parent">
<div class="child">
</div>
</div>Вопрос
Как можно создать эффект второго фрагмента, не зная ширины и высоты родителя divs? Можно использовать ширину границы родителя divs, но свойства ширины и высоты дочернего элемента должны быть равны 100%.
