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

Question

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

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

вложенные дивы внутри он должен повторно размер себя хорошо ..

это такое вообще возможно?

РЕДАКТИРОВАТЬ:

ширина 90% не работает при попытке повторно размер экрана по вертикали.

Answer 1

В этом случае внешний <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

Try before buy

Answer 2

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

Например.

div { 
    height: 90vh; 
} 

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

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

Например.

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

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