html - Make a div fill the height of the remaining screen space

ID : 315

viewed : 242

Tags : htmlcsshtml-tablehtml

Top 5 Answer for html - Make a div fill the height of the remaining screen space

vote vote


2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,  body {    height: 100%;    margin: 0;  }    .box {    display: flex;    flex-flow: column;    height: 100%;  }    .box .row {    border: 1px dotted grey;  }    .box .row.header {    flex: 0 1 auto;    /* The above is shorthand for:    flex-grow: 0,    flex-shrink: 1,    flex-basis: auto    */  }    .box .row.content {    flex: 1 1 auto;  }    .box .row.footer {    flex: 0 1 40px;  }
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->    <div class="box">    <div class="row header">      <p><b>header</b>        <br />        <br />(sized to content)</p>    </div>    <div class="row content">      <p>        <b>content</b>        (fills remaining space)      </p>    </div>    <div class="row footer">      <p><b>footer</b> (fixed height)</p>    </div>  </div>

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

vote vote


There really isn't a sound, cross-browser way to do this in CSS. Assuming your layout has complexities, you need to use JavaScript to set the element's height. The essence of what you need to do is:

Element Height = Viewport height - - desired bottom margin 

Once you can get this value and set the element's height, you need to attach event handlers to both the window onload and onresize so that you can fire your resize function.

Also, assuming your content could be larger than the viewport, you will need to set overflow-y to scroll.

vote vote


The original post is more than 3 years ago. I guess many people who come to this post like me are looking for an app-like layout solution, say a somehow fixed header, footer, and full height content taking up the rest screen. If so, this post may help, it works on IE7+, etc.

And here are some snippets from that post:

@media screen {         /* start of screen rules. */         /* Generic pane rules */    body { margin: 0 }    .row, .col { overflow: hidden; position: absolute; }    .row { left: 0; right: 0; }    .col { top: 0; bottom: 0; }    .scroll-x { overflow-x: auto; }    .scroll-y { overflow-y: auto; }      .header.row { height: 75px; top: 0; }    .body.row { top: 75px; bottom: 50px; }    .footer.row { height: 50px; bottom: 0; }        /* end of screen rules. */   }
<div class="header row" style="background:yellow;">      <h2>My header</h2>  </div>   <div class="body row scroll-y" style="background:lightblue;">      <p>The body</p>  </div>   <div class="footer row" style="background:#e9e9e9;">      My footer  </div>

vote vote


Instead of using tables in the markup, you could use CSS tables.


<body>         <div>hello </div>     <div>there</div> </body> 

(Relevant) CSS

body {     display:table;     width:100%; } div {     display:table-row; } div+ div {     height:100%;   } 


Some advantages of this method are:

1) Less markup

2) Markup is more semantic than tables, because this is not tabular data.

3) Browser support is very good: IE8+, All modern browsers and mobile devices (caniuse)

Just for completeness, here are the equivalent Html elements to css properties for the The CSS table model

table    { display: table } tr       { display: table-row } thead    { display: table-header-group } tbody    { display: table-row-group } tfoot    { display: table-footer-group } col      { display: table-column } colgroup { display: table-column-group } td, th   { display: table-cell } caption  { display: table-caption }  
vote vote


CSS only Approach (If height is known/fixed)

When you want the middle element to span across entire page vertically, you can use calc() which is introduced in CSS3.

Assuming we have a fixed height header and footer elements and we want the section tag to take entire available vertical height...


Assumed markup and your CSS should be

html,  body {    height: 100%;  }    header {    height: 100px;    background: grey;  }    section {    height: calc(100% - (100px + 150px));    /* Adding 100px of header and 150px of footer */    background: tomato;  }    footer {    height: 150px;    background-color: blue;  }
<header>100px</header>  <section>Expand me for remaining space</section>  <footer>150px</footer>

So here, what am doing is, adding up the height of elements and than deducting from 100% using calc() function.

Just make sure that you use height: 100%; for the parent elements.

Top 3 video Explaining html - Make a div fill the height of the remaining screen space