🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Как растянуть элемент на 100%?
Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.
🟠Растяжение элемента на 100% ширины (`width: 100%;`)
Элемент займет всю ширину своего родителя.
Я растянут по ширине!
🟠Растяжение элемента на 100% высоты (`height: 100%;`)
Элемент займет всю высоту родительского элемента.
Я растянут по высоте!
🟠Растяжение элемента на 100% ширины и высоты
Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.
Растянут по ширине и высоте!
🟠Растяжение относительно окна браузера (`viewport`)
Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).
Я растянут на весь экран!
Для исключения полосы прокрутки можно использовать
width: calc(100vw - 16px); /* Учитывается ширина скролла */
🟠Использование `position: absolute`
Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.
Я растянут абсолютно!
🟠Растяжение внутри Flexbox-контейнера
Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.
Я растянут по Flexbox!
🟠Растяжение внутри Grid-контейнера
CSS Grid также позволяет растягивать элементы.
Я растянут внутри Grid!
🟠Растяжение с учетом отступов
Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.
Я растянут с учетом отступов!
Ставь 👍 и забирай 📚 Базу знаний