CODEWITHSUNDEEP
htmlcss
EdzJohnson
EdzJohnson

Reputation: 1175

DIV height set as percentage of screen?

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?

Upvotes: 100

Views: 153791

Answers (5)

aleclarson
aleclarson

Reputation: 19055

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

Upvotes: 2

Arash moradabadi
Arash moradabadi

Reputation: 365

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

Upvotes: 0

Salman
Salman

Reputation: 3207

Try using Viewport Height

div {
    height:100vh; 
}

It is already discussed here in detail

Upvotes: 242

Human Being
Human Being

Reputation: 8387

This is the solution ,

Add the html also to 100%

html,body {

   height: 100%;
   width: 100%;

}

Upvotes: 6

btevfik
btevfik

Reputation: 3431

make position absolute for that div.

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

Upvotes: 7

Related Questions