I'm looking to set a parent DIV as 70% of the full 100% screen height. I've set the following CSS but it doesn't seem to do anything:
body {
font-family: 'Noto Sans', sans-serif;
margin: 0 auto;
height: 100%;
width: 100%;
}
.header {
height: 70%;
}
For some reason it doesn't seem to be working though and the header isn't 70% of the screen size. Any advice?
make position absolute for that div.
This is the solution ,
Add the html also to 100%
html,body {
height: 100%;
width: 100%;
}
By using absolute positioning, you can make <body> or <form> or <div>, fit to your browser page. For example:
<body style="position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px;">
and then simply put a <div> inside it and use whatever percentage of either height or width you wish
<div id="divContainer" style="height: 100%;">
If you want it based on the screen height, and not the window height:
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'
})
Source: Stackoverflow.com