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?](http://stackoverflow.com/questions/15021573/css-get-div-to-take-up-100-body-height-minus-fixed-height-header-and-footer) — Pete, Jun 02 '14 at 10:24

James Donnelly · Accepted Answer · 2014-06-02T10:35:28.003

8

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.

edited Jun 02 '14 at 10:35

answered Jun 02 '14 at 10:20

James Donnelly

126,410
34
208
218

1

Many thanks! Was the function calc that was missing. – user3698898 Jun 02 '14 at 23:50
1

Have in mind that `vh` is not supported by Safari, Firefox and IE. – Antonio Brandao Sep 30 '20 at 12:49
1

Just to notice that `vh` could be a mess if you are letting your user expand or reduce their address bar in mobile browsers. – Terry Windwalker Dec 31 '21 at 04:19

score 0 · Answer 2 · answered Jun 02 '14 at 10:32

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>

Use window.innerHeight to set div height in HTML

2 Answers2