DIV height set as percentage of screen?

Question

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?

score 237 · Answer 1 · edited May 23 '17 at 12:18

237

Try using Viewport Height

div {
    height:100vh; 
}

It is already discussed here in detail

edited May 23 '17 at 12:18

Community

1
1

answered Dec 30 '13 at 07:21

Salman

3,137
4
23
31

Works surprisingly well across browsers and devices. – likeitlikeit Aug 23 '14 at 13:48
2

Didn't know this existed. Thanks a lot! – Danman Oct 05 '15 at 04:03
You just saved me a lot of time. Thank you! I didn't know that even existed. – Lukas May 12 '17 at 16:55
2

That's `window.innerHeight`, not `screen.height` – aleclarson Nov 19 '17 at 00:29

score 7 · Answer 2 · answered Apr 05 '13 at 20:58

7

make position absolute for that div.

http://jsfiddle.net/btevfik/KkKeZ/

answered Apr 05 '13 at 20:58

btevfik

3,391
3
27
39

score 6 · Answer 3 · answered Oct 10 '13 at 10:32

6

This is the solution ,

Add the html also to 100%

html,body {

   height: 100%;
   width: 100%;

}

answered Oct 10 '13 at 10:32

Human Being

8,269
28
93
136

score 2 · Answer 4 · edited Jun 11 '21 at 07:50

2

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'
})

edited Jun 11 '21 at 07:50

Melebius

6,183
4
39
52

answered Nov 19 '17 at 00:28

aleclarson

18,087
14
64
91

THIS is the answer that works for me in Cordova for setting the toolbars to the exact height and KEEPING them that height when the soft keyboard is pulled into view. Before, the toolbars were set to a percentage of height and got smaller as the viewport decreased in height, but after setting their height with this, they are the same size when the keyboard is pulled into view. Combine with "adjustResize" in your AndroidManifest file for using a top and bottom toolbar. – Code_Student09 May 30 '21 at 01:52

score 0 · Answer 5 · answered May 01 '19 at 11:35

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%;">

DIV height set as percentage of screen?

5 Answers5

Linked

Related