Высота DIV в процентах от экрана?

Я хочу установить родительский DIV как 70% полной высоты экрана 100%. Я установил следующий CSS, но он ничего не делает:

body {
font-family: 'Noto Sans', sans-serif;
margin: 0 auto;
height: 100%;
width: 100%;
}
.header {
height: 70%;
}

По какой-то причине он не работает, хотя заголовок не составляет 70% от размера экрана. Любые советы?

Ответы

Ответ 1

Попробуйте использовать высоту Viewport

div {
    height:100vh; 
}

Здесь уже обсуждается здесь

Ответ 3

Это решение,

Добавьте html также в 100%

html,body {

   height: 100%;
   width: 100%;

}

Ответ 4

Если вы хотите, чтобы оно основывалось на высоте экрана, а не на высоте окна:

const height = 0.7 * screen.height

// jQuery
$('.header').height(height)

// Vanilla JS
document.querySelector('.header').style.height = height + 'px'

// If you have multiple <div class="header"> elements
document.querySelectorAll('.header').forEach(function(node) {
  node.style.height = height + 'px'
})

Ответ 5

Используя абсолютное позиционирование, вы можете сделать <body> или <form> или <div> подходящими для страницы вашего браузера. Например:

<body style="position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px;">

а затем просто поместите внутри него <div> и используйте любой процент height или width какой пожелаете

<div id="divContainer" style="height: 100%;">