2

имею такую структуру:

<div id="lev-1">
    <div id="lev-2">
        <div id="lev-3">
        </div>
    </div>
</div>

#lev-2 { position: absolutle; }

можно ли для lev-3 установить ту же ширину, что и lev-1

UPDATE

требуется выставить ширину для верхнего скролла: введите сюда описание изображения

1
  • 1
    У вас вопрос явно неполный, условия не все озвучены.
    – Romchik
    27 июл 2017 в 10:41

1 ответ 1

3

Можно, если поддержка 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 приводит к созданию контекста наложения и содержащего их блока. Объект выступает в качестве контейнера для потомков с фиксированным позиционированием.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.