Is it possible to force div to take height of the screen

Question

We are using bootstrap library for styling. We have a div and we want the div to take the height of the screen. I do not want to set min or max height.

I can set the height through javascript but I am just curious if I can force the div to take height of the screen through CSS. Do we have any option apart from using media query?

When you say the "*height of the screen*" do you mean the height of the user's monitor screen (whether or not the user has their browser full-screen) or the full height of the view-port of the browser? — David Thomas, Jun 12 '15 at 08:48
if you are not targeting old browsers, checkout vh http://codepen.io/devtips/pen/XJByvr/ — Adrian Florescu, Jun 12 '15 at 08:49

score 5 · Accepted Answer · edited Jun 12 '15 at 08:49

5

You can also use vh. vh is viewport height. You can find more about it here

edited Jun 12 '15 at 08:49

Praveen Kumar Purushothaman

164,888
24
203
252

answered Jun 12 '15 at 08:48

Aakash Aggarwal

306
2
9

3

Isn't it viewport-height? – Praveen Kumar Purushothaman Jun 12 '15 at 08:48

score 1 · Answer 2 · answered Jun 12 '15 at 08:52

1

Please check if this is what you want.

html,
body {
  height: 100%;
}
div {
  height: 100%;
}

<div>
  <h1> Hello World </h1>
</div>

JSFIDDLE

answered Jun 12 '15 at 08:52

Avijit Kumar

538
2
9

Hi, for better understanding, I have given a bg color too. http://jsfiddle.net/avijitkr/mymj1gfb/2/ – Avijit Kumar Jun 12 '15 at 08:53

score 0 · Answer 3 · answered Jun 12 '15 at 08:46

0

Yes, you can do by using position. Say you have the div as .mask:

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
}

answered Jun 12 '15 at 08:46

Praveen Kumar Purushothaman

164,888
24
203
252

Is it possible to force div to take height of the screen

3 Answers3