Можно задать ширину предка-предка?

333
29 июля 2017, 05:13

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

<div id="lev-1">
    <div id="lev-2">
        <div id="lev-3">
        </div>
    </div>
</div>
#lev-2 { position: absolutle; }

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

UPDATE

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

Answer 1

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

READ ALSO
Не удалось выполнить операцию .pipe(gulp.dest(&ldquo;dist/styles&rdquo;))

Не удалось выполнить операцию .pipe(gulp.dest(“dist/styles”))

У нас готовы плагины packagejson Проблема в том что не удалось выполнить операцию gulp

284
Работа с blur() эффектом CSS

Работа с blur() эффектом CSS

Как видно в этом примере, когда я использую blur(5px), картинка становится меньше на 5 пикселей из-за блура и можно видеть по краям цвет (от другой...

343
Как сделать фон &ldquo;сетку из точек&rdquo; с помощью css3?

Как сделать фон “сетку из точек” с помощью css3?

Подскажите, пожалуйста, как сделать с помощью css3 такой фон? И возможно ли в принципе?

423