имею такую структуру:
<div id="lev-1">
<div id="lev-2">
<div id="lev-3">
</div>
</div>
</div>
#lev-2 { position: absolutle; }
можно ли для lev-3 установить ту же ширину, что и lev-1
UPDATE
требуется выставить ширину для верхнего скролла:
Можно, если поддержка IE не важна (ответ и для ширины, и для высоты).
Задайте блоку #lev-1 любой transform (например, tranform: rotate(0deg) который визуально ничего не поменяет), а для #lev3 комбинацию position: fixed; left: 0; top: 0; width: 100%; height: 100%; (или вместо width: 100%; height: 100%; задайте right: 0; bottom: 0;). Демонстрция:
#lev-1 {
transform: rotate(0deg);
/* необязательные стили для демонстрации */
width: 150px;
height: 350px;
border: 2px solid red;
}
#lev-2 {
position: absolute;
/* необязательные стили для демонстрации */
width: 250px;
height: 100px;
border: 2px solid blue;
}
#lev-3 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* необязательные стили для демонстрации */
border: 2px solid green;
background-color: yellow;
opacity: 0.3;
}
<div id="lev-1">
<div id="lev-2">
<div id="lev-3">
</div>
</div>
</div>
Это работает, потому что так следует из спецификации CSS Transforms:
For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
Что в вольном переводе значит:
Для элементов, параметры которых регулируются блочной моделью CSS, любое значение transform, отличное от none приводит к созданию контекста наложения и содержащего их блока. Объект выступает в качестве контейнера для потомков с фиксированным позиционированием.
Сборка персонального компьютера от Artline: умный выбор для современных пользователей