tgoop.com/frontendInterview/4359
Create:
Last Update:
Last Update:
Как растянуть элемент на 100%?
Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.
Растяжение элемента на 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>
👉 @frontendInterview
BY Frontend Interview - собеседования по Javascript / Html / Css
Share with your friend now:
tgoop.com/frontendInterview/4359