Use window.innerHeight to set div height in HTML

Question

I have three div elements (header, middle and footer) and I want to fix the header and the footer to height of 100px, and the middle to have a dynamic height per the window inner height.

I tried the following without success:

<div id="header" style="background-color:white;width:100px; height:12vh; margin: 0; padding: 0 ;border:0;"></div> <div id="map_canvas" style="background-color:black;width:window.innerHeight-200;height:78vh;margin: 0; padding: 0 ;border:0"></div> <div id="footer" style="background-color:white;width:100px; height:10vh; margin: 0; padding: 0 ;border:0;bottom:0px"></div>

possible duplicate of CSS: get div to take up 100% body height, minus fixed-height header and footer? — Pete
– Pete, Commented Jun 2, 2014 at 10:24

James Donnelly · Accepted Answer · 2014-06-02 10:35:28Z

window.innerHeight is JavaScript, not CSS.

If you want your #map_canvas element to have a width of 100vh (see Viewport-percentage lengths) minus 200px you can use CSS's calc() function:

<div id="map_canvas" style="...width: calc(100vh - 200px);..."></div>

JSFiddle demo.

Ideally you shouldn't be using inline styles though. You should move your styles into a stylesheet:

div#map_canvas { ... width: calc(100vh - 200px); }

I have a feeling you may have wanted to do this for the height though, and not the width... In that case simply change width above to height.

<div id="map_canvas" style="...height: calc(100vh - 200px);..."></div>

JSFiddle demo using height instead of width.

Have in mind that vh is not supported by Safari, Firefox and IE.
Just to notice that vh could be a mess if you are letting your user expand or reduce their address bar in mobile browsers.

Senthil · Accepted Answer · 2014-06-02 10:32:25Z

are you expecting like this

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>InnerHeight</title> <style> #header{ height: 100px; } #content{ background: gray; } #footer{ height: 100px; } </style> <script src="jquery.js"></script> </head> <body> <div id='header'></div> <div id='content'></div> <div id='footer'></div> <script type="text/javascript"> $(document).ready(function(){ $('#content').css('height',$(document).innerHeight()+200) }); </script> </body> </html>

Collectives™ on Stack Overflow

Use window.innerHeight to set div height in HTML

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related