Get window height and set div sizes to this height

Question

I would like to set div sizes to the size of browser window on open.

I am using this to get the window height..

 var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

but now I am stuck as to how i can pass this height into the html..

The div I want to resize has a lot of content inside so I don't think I can simply use replaceWith() and put the new height css inline as i need to also pass in all the other html which will be a big pain.

If you can answer in both js and/or jQ it would be fantastic.

Thank you

Ok so we may need to see a bit of your code because I don't see why you would need to do it in js. Simply do it in css ... no? — JFC
– JFC, Commented Jul 3, 2017 at 18:23

Jason · Accepted Answer · 2017-07-03 18:24:47Z

3

The dimensional units 'vh' and 'vw' were added to CSS3 to do this sort of thing. Setting the height to 100vh should do what you want.

answered Jul 3, 2017 at 18:24

Jason

3,2151 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

katniss.everbean Over a year ago

To expand on this just a little, "vh" and "vw" stand for viewport height and viewport width respectively. Each unit represents a percent (1/100) of the current viewport size, so 100vh == 100% of the viewport's current height. The sizes are recalculated if the viewport changes size, so the div would always be 100% of the viewport's height even if you resize the browser window.

Lansana Camara · Accepted Answer · 2017-07-03 18:25:26Z

Fiddle: https://jsfiddle.net/d0ufr8hx/

HTML:

<div> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div> <div> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div> <div> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div>

jQuery:

$(document).ready(function () { var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; $('div').height(height) });

Alternatively, use a pure CSS solution (vh and vw):

div { width: 100vw; height: 100vh; }

Be cautious of vh and vw if you are trying to support older browsers, for instance neither are supported beyond IE 11. Browser support for vh, browser support for vw.

Mujthaba Ibrahim · Accepted Answer · 2017-07-03 18:44:26Z

So according to your pure javaScript code You can Try this : -

 <div id="divId"></div> document.getElementById('divId').style.height = height +"px"

Collectives™ on Stack Overflow

Get window height and set div sizes to this height

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related