Div с автоматическим изменением размера при изменении ширины окна\высоты

Я везде искал. и до сих пор не смог найти пример кода очень "базовой" идеи:

Div, который принимает 90% размера экрана и настраивается, когда изменяется размер браузера (чтобы принять 90% относительного экрана)

Вложенные div внутри внутри должны также сами размер.

ширина 90% не работает, когда я пытаюсь изменить размер экрана по вертикали.

Ответы

Ответ 1

Используйте атрибуты vh. Это означает высоту видового экрана и процент. Таким образом, высота: 90vh будет означать 90% высоты видового экрана. Это работает в большинстве современных браузеров.

Eg.

div {
  height: 90vh;
}

Вы можете отказаться от остальных своих глупых 100% вещей на теле.

Если у вас есть заголовок, вы также можете сделать некоторые забавные вещи, например, принять его во внимание, используя функцию calc в CSS.

Eg.

div {
  height: calc(100vh - 50px);
}

Это даст вам 100% высоты просмотра, минус 50 пикселей для вашего заголовка.

Ответ 2

В этом случае внешний <div> имеет ширину и высоту 90%. Внутренний div> имеет ширину 100% от родительского. Оба масштаба при повторной калибровке окна.

HTML

<div>
    <div>Hello there</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

body > div {
    width: 90%;
    height: 100%;
    background: green;
}

body > div > div {
    width: 100%;
    background: red;
}

Demo

Попробуйте перед покупкой