Как сделать чтобы блок при адаптации всегда занимал всю страницу?

Question

[luxurypluxury]

Тут я сделал падингами, но я понимаю что это не правильно.


Можно ли как-то сделать высоту main такую чтобы при адаптации не было никогда скрола и контент сам подстраивался под высоту?

Answer 1

[ijesusyt]

Чтобы блокировать страницу при адаптации, чтобы она никогда не прокручивалась, вы можете попробовать использовать свойство CSS height: 100vh для элемента body. Это свойство устанавливает высоту элемента равной полной высоте области просмотра (видимой части веб-страницы).

Например, вы можете использовать следующий CSS:

body {
  height: 100vh;
  overflow: hidden;
}

Это заставит элемент body занимать всю высоту окна просмотра, а свойство overflow: hidden предотвратит любую прокрутку.

Вы также можете установить для свойства height элемента body фиксированное значение в пикселях, например, height: 1000px, если вы хотите, чтобы страница имела определенную высоту независимо от размера окна просмотра.

Имейте в виду, что использование высоты: 100vh или фиксированного значения высоты может плохо работать на маленьких экранах или когда содержимое страницы выше области просмотра. В этих случаях вам может потребоваться использовать адаптивный подход к дизайну, чтобы содержимое соответствовало области просмотра.

Comments

[luxurypluxury]

но у меня на страницах контент всегда может изменяться, допустим при сортировке товара на странице есть 12 товаров что занимает больше 100vh, а есть и 3-4 что подходит для 100vh.

Answer 2

[Nik Faraday]

Попробуйте воспользоваться медиа запросами (Ссылка на то, что вам нужно)