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

🤔 Как растянуть элемент на 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% не будет "выходить за пределы" из-за отступов. Я растянут с учетом отступов! Ставь 👍 и забирай 📚 Базу знаний