height of a div to match the height of the viewport

Question

I have a div like this.

<div> ... </div>

I want its height to be the height of the view port (not of the page)

is it possible to do this via CSS or do I have to write some javascript ?

[Possible duplicate](http://stackoverflow.com/questions/1509589/full-viewport-height-scaling-div-just-css-no-js-possible) — Andrei LED, Sep 27 '11 at 14:10

score 4 · Accepted Answer · answered Sep 27 '11 at 14:08

Yes, it's possible. CSS percentage height will work as long as the parent element has a height defined. Assuming this is your markup:

<html>
  <body>
    <div></div>
  </body>
</html>

This CSS will cause the <div> to have the full height of the viewport:

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

If you wanted the <div> to expand with its content, the CSS would change as follows:

html, body {
  height: 100%;
}

div {
  min-height: 100%;
}

score 1 · Answer 2 · answered Sep 27 '11 at 14:08

1

if your have set your viewPort to a certain height, you can just give your div height:100%;..

answered Sep 27 '11 at 14:08

Atheist

score 0 · Answer 3 · answered Sep 27 '11 at 14:10

0

If the div is anywhere in the document, you would need to use javascript. With jQuery is quite simple:

$("#my-div").height($(window).height());

answered Sep 27 '11 at 14:10

Chango

3 Answers3