Frontend | Вопросы собесов

🤔 Как растянуть элемент на 100%?

Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.

🟠Растяжение элемента на 100% ширины (`width: 100%;`)
Элемент займет всю ширину своего родителя.

<div style="width: 300px; background: lightblue;">
  <div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>

🟠Растяжение элемента на 100% высоты (`height: 100%;`)
Элемент займет всю высоту родительского элемента.

<div style="height: 300px; background: lightblue;">
  <div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>

🟠Растяжение элемента на 100% ширины и высоты
Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

🟠Растяжение относительно окна браузера (`viewport`)
Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

Для исключения полосы прокрутки можно использовать

width: calc(100vw - 16px); /* Учитывается ширина скролла */

🟠Использование `position: absolute`
Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

🟠Растяжение внутри Flexbox-контейнера
Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

🟠Растяжение внутри Grid-контейнера
CSS Grid также позволяет растягивать элементы.

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

🟠Растяжение с учетом отступов
Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

www.tg-me.com/us/Frontend | Вопросы собесов/com.easy_javascript_ru/1661

3.0K viewsJun 17 at 09:05

🤔 Как растянуть элемент на 100%?

Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.

🟠Растяжение элемента на 100% ширины (`width: 100%;`)
Элемент займет всю ширину своего родителя.

<div style="width: 300px; background: lightblue;">
  <div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>

<div style="height: 300px; background: lightblue;">
  <div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

width: calc(100vw - 16px); /* Учитывается ширина скролла */

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>