4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow

http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 1/11
Take the 2-minute tour
Adrien Be
1,159 1 15 37
Vincent McNabb
5,500 3 14 36
I am currently working on a web application, where I want the content to fill the height of the entire
screen.
The page has a header, which contains a logo, and account information. This could be an arbitrary
height. I want the content div to fill the rest of the page to the bottom.
I have a header div and a content div . At the moment I am using a table for the layout like so:
CSS:
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
HTML:
<table id="page">
<tr><td id="tdheader">
<div id="header">...</div>
</td></tr>
<tr><td id="tdcontent">
<div id="content">...</div>
</td>
</table>
The entire height of the page is filled, and no scrolling is required.
For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes
the content will be a real table, with it's height set to 100%. Putting header inside content will not
allow this to work.
Is there a way to achieve the same effect without using the table ?
Update:
Elements inside the content div will have heights set to percentages as well. So something at 100%
inside the div will fill it to the bottom. As will two elements at 50%.
Update 2:
For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside
#content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the
only thing that works.
html css div html-table
edited Feb 10 at 10:34 asked Sep 18 '08 at 5:06
missing a end quote on the id="tdcontent" Bruce Sep 18 '08 at 5:18
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.
Make a div fill the height of the remaining screen space
sign up

log in

tour

help

careers 2.0

4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 2/11
18 Answers
Sneaky
8,597 7 30 61
NICCAI
1,205 1 7 7
44 This is EXACTLY why we shouldn't hassle people who use table based layouts. JohnFx Jan 25 '12 at
3:16
1 +1 for 'use a table' James Jan 15 '13 at 14:07
For anyone stumbling here in the future, you can get the desired table layout in most browsers, without the
table mark-up, by using display:table and related properties, see this answer to a very similar question.
AmeliaBR Jan 20 at 2:23
I've tried to recereate your setup - jsfiddle.net/ceELs - but its not working, what am I missed? Gill Bates
Apr 14 at 12:12
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 - element.offset.top - 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.
edited Sep 3 '13 at 17:52 answered Sep 18 '08 at 8:16
1 That's what I suspected. However, the app will also work with Javascript turned off, so I guess I'll just keep
using the table. Vincent McNabb Sep 18 '08 at 9:22
31 Because non of the solutions work as per the description. Vincent McNabb Sep 29 '08 at 22:08
6 Vincent, way to stand your ground. I was looking to do the exact same thing and it appears not possible
with css? I'm not sure but regardless none of the other tons of solutions do what you've described. The
javascript one is the only one that works correctly at this point. Travis May 4 '10 at 20:00
1 This is by far the best solution to this problem. It wouldn't work for the original poster, but this worked for
me. CrowderSoup Nov 14 '11 at 22:31
5 +1 for forcing me do deal with reality. It has taken years for me to finally accept that there is no CSS for this
exact problem. X-( Dan Ross Mar 7 '13 at 21:50
show 4 more comments
The original post is more than 3 years ago. And 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.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
And here are some snippets from that post,
add comment
4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 3/11
h--n
2,044 1 12 24
<!doctype html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
/* 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; }
</style>
</head>
<body>
<div class="header row">
<h2>My header</h2>
</div>
<div class="body row scroll-y">
<p>The body</p>
</div>
<div class="footer row">
My footer
</div>
</body>
</html>
answered Oct 21 '11 at 15:02
25 Theres just one problem with this: the header and footer arent auto-sized. That is the real difficulty, and
that is why a "this is not possible" answer is currently at the top... romkyns Mar 4 '12 at 17:16
3 Even if it's not a solution to the original problem, this helped meso thank you anyway:) Luke Sampson
Sep 6 '12 at 10:46
I needed a 55px header and a div that fills the rest of the document's height. this is the solution! Matas
Sep 11 '12 at 0:46
PERFECT solution as for me, thank you! :] trejder Sep 28 '12 at 17:16
You are the bomb, I've been trying this for so long and this is the only solution I found. I needed my nav
element to be 60px height at the top and the remainder to span 100%, this solved it. Adam Waite Jan 7
'13 at 10:07
show 2 more comments
Instead of using tables in the markup, you could use css tables .
Markup
<body>
<div>hello </div>
<div>there</div>
</body>
(Relevant) CSS
body
{
display:table;
width:100%;
}
div
4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 4/11
Danield
14.7k 2 35 56
div
{
display:table-row;
}
div+ div
{
height:100%;
}
FIDDLE1 and FIDDLE2
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 }
edited Jan 21 at 10:17 answered Jun 6 '13 at 11:20
2 i was just pointed to the technique of css tables. Turns out the answer already was already in this answered
question. This is the best solution; clean, elegant, and using the exact tool in the exact way it was intended.
CSS Tables Ian Boyd Aug 10 '13 at 22:27
The fiddle code doesn't quite match the answer here. Adding html, body { height: 100%, width: 100%
} seemed critical in my tests. mlibby Nov 23 '13 at 16:14
1 +1 Excellent solution. If it can be done with CSS, it should. Andrew Mao Jan 23 at 2:47
An annoying features of CSS tables is exactly the same as with normal tables: If the content is too large
they expand the cell to fit. This means you may still need to limit the size (max-height), or set the height
from code if the page is dynamic. I really miss Silverlight grids! :( TrueBlueAussie Feb 24 at 17:32
Try this, it should work in all browsers:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
* {
margin: 0;
}
html,
body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -44px; /* -44px being the size of the footer */
}
#header {
height: 86px;
}
add comment
4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 5/11
Evandro
15 4
daniels
6,153 11 44 93
Chris
3,338 3 24 53
}
#footer,
#push {
height: 44px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
<div id="push"></div>
</div>
<div id="footer">footer</div>
</body>
</html>
http://jsfiddle.net/QFt93/
edited Feb 21 at 16:09 answered Sep 18 '08 at 8:27
Works great in Safari, Chrome, Firefox. Haven't tried IE. Leopd Oct 13 '10 at 23:43
18 Looks nice but the poster said he doesn't know the height of the header... ErikE Oct 25 '10 at 6:35
5 Would you mind expanding your answer to explain how this is supposed to actually work? I'm having a hard
time understanding it, specially since some of the functionality is duplicated to make things work on more
browsers. Why set the height more then once? Why do we need a "push" div? ... missingno Jul 6 '12 at
21:01
Doesn't work in IE 8/9. l46kok Feb 20 '13 at 7:00
I've been searching for an answer for this as well. If you are fortunate enough to be able to target IE8
and up, you can use display:table and related values to get the rendering rules of tables with block-level
elements including div.
If you are even luckier and your users are using top-tier browsers (for example, if this is an intranet app
on computers you control, like my latest project is), you can use the new Flexible Box Layout in CSS3!
answered Apr 11 '11 at 15:48
1 Citing the W3C site for css3-flexbox "Publication as a Working Draft does not imply endorsement by the
W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents
at any time. It is inappropriate to cite this document as other than work in progress." So this is not
appropriate to recommend for actual development, only for preview of some kind. Artem Oboturov Nov 3 '11
at 11:43
5 @ArtemOboturov According to the W3C, HTML5 is a far way off from being finished, but I see big sites like
Youtube using a fair share of what's already here. Camilo Martin Aug 26 '12 at 23:36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
add comment
add comment
4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 6/11
Jerph
2,361 2 23 32
Joran Den Houting
3,383 3 6 36
Tonye - True Vine Productions
69 1 1
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
In all sane browsers, you can put the "header" div before the content, as a sibling, and the same CSS will
work. However, IE7- does not interpret the height correctly if the float is 100% in that case, so the header
needs to be IN the content, as above. The overflow: auto will cause double scroll bars on IE (which
always has the viewport scrollbar visible, but disabled), but without it, the content will clip if it overflows.
answered Sep 18 '08 at 6:01
Close! Almost what I want, except I'm going to have other things positioned in the div ... i.e. top: 0; will
put something right below the header. I'll modify my question again, because you answered it perfectly, and
still not what I want! I'll just hide the overflow as the content must fit. Vincent McNabb Sep 18 '08 at 7:50
-1: This answer creates a div called content that covers the whole screen, not the rest of the screen
Casebash May 19 '11 at 5:44
What worked for me (with a div within another div and I assume in all other circumstances) is to set the
bottom padding to 100%. That is, add this to your css / stylesheet:
padding-bottom: 100%;
edited Oct 31 '13 at 10:28 answered Oct 17 '11 at 14:00
1 Perfect answer, thanks Adam Casey Jan 6 '13 at 4:02
3 100% of what? If I try this I get a huge blank space and scrolling starts to happen. mlibby Nov 23 '13 at
15:44
I wresteled with this for a while and ended up with the following:
Since it is easy to make the content DIV the same height as the parent but apparently difficult to make it
the parent height minus the header height I decided to make content div full height but position it
absolutely in the top left corner and then define a padding for the top which has the height of the header.
This way the content displays neatly under the header and fills the whole remaining space:
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
add comment
add comment
4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 7/11
Joran Den Houting
3,383 3 6 36
B_G
41 1
Mikko Rantalainen
2,042 18 36
Josh Crozier
22.3k 13 35 48
herrtoto
31 2
user1635906
28 3
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
edited Oct 31 '13 at 10:39 answered Jun 20 '11 at 9:36
5 What if you don't know the height of the header ? Yugal Jindle Mar 17 '13 at 7:46
If you can deal with not supporting old browsers (that is, MSIE 9 or older), you can do this with Flexible
Box Layout Module which is already W3C CR. That module allows other nice tricks, too, such as re-
ordering content.
Unfortunately, MSIE 9 or lesser do not support this and you have to use vendor prefix for the CSS
property for every browser other than Firefox. Hopefully other vendors drop the prefix soon, too.
An another choice would be CSS Grid Layout but that has even less support from stable versions of
browsers. In practice, only MSIE 10 supports this.
answered May 3 '13 at 10:55
Why not just like this?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
Giving you html and body (in that order) a height and then just give your elements a height?
Works for me
edited Oct 22 '13 at 0:05 answered Feb 20 '12 at 9:21
I like this one. thanks! JeyKeu Nov 2 '12 at 10:10
I found a quite simple solution, because for me it was just a design issue. I wanted the rest of the Page
not to be white below the red footer. So i set the pages background color to red. And the contents
backgroundcolor to white. With the contents height set to eg. 20em or 50% an almost empty page won't
leave the whole page red.
answered Sep 14 '12 at 8:02
add comment
add comment
add comment
add comment
4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 8/11
Hemerson Varela
1,753 1 5 16
Amiramix
1,139 4 19
You can actually use display: table to split the area into two elements (header and content), where
the header can vary in height and the content fills the remaining space. This works with the whole page,
as well as when the area is simply the content of another element positioned with position set to
relative , absolute or fixed . It will work as long as the parent element has a non-zero height.
See this fiddle and also the code below:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
edited Aug 1 '13 at 14:47 answered Jul 5 '13 at 21:17
A good answer, which I upvoted, but unfortunately, does not work with IE8, which will still be around for a long
time to come. Vincent McNabb Jul 9 '13 at 6:24
Yes, I figured that out myself so I also couldn't use it in my application, but at least I could share the solution
in hope that maybe someone may know something I don't know and improve it. And, well, maybe it's that time
again to think about serving different content to IE rather than degrading the experience on all browsers for all
users just to accommodate for IE? Thanks for upvoting :) Amiramix Jul 9 '13 at 13:06
Applications like Gmail use Javascript for the sizing, which is a better solution that CSS in most cases
anyway. Vincent McNabb Jul 9 '13 at 21:31
I think they are using Javascript because there is no other good cross-browser CSS solution, not because it's
better. Amiramix Jul 9 '13 at 21:37
4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 9/11
Jerph
2,361 2 23 32
Vincent, I'll answer again using your new requirements. Since you don't care about the content being
hidden if it's too long, you don't need to float the header. Just put overflow hidden on the html and body
tags, and set #content height to 100%. The content will always be longer than the viewport by the height
of the header, but it'll be hidden and won't cause scrollbars.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p
{
margin: 0;
}
#header
{
background: red;
}
#content
{
position: relative;
height: 100%;
background: blue;
}
#content #positioned
{
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
answered Sep 18 '08 at 17:52
Already thought of this. But it doesn't work either. I'm just going to stick with a table because it works.
Thanks for the update though. Vincent McNabb Sep 18 '08 at 18:02
it never worked for me in other way then with use of the JavaScript as NICCAI suggested in the
very first answer. I am using that approach to rescale the <div> with the Google Maps.
Here is the full example how to do that (works in Safari/FireFox/IE/iPhone/Andorid (works with rotation)):
add comment
add comment
4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 10/11
STeN
2,663 8 40 90
Marc Audet
12.4k 4 15 32
Arun
1,827 1 12 33
Bruce
3,363 2 20 33
<html>
<head>
<style type="text/css">
body
{
height: 100%;
margin: 0;
padding: 0;
}
.header
{
height: 100px;
background-color: red;
}
.content
{
height: 100%;
background-color: green;
}
</style>
<script type="text/javascript">
function resize()
{
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
</script>
</head>
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId">
</div>
</body>
</html>
Comments are welcomed. BR STeN
answered Aug 6 '11 at 3:30
Try this
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
edited Oct 31 '13 at 10:40 answered Apr 27 '13 at 11:45
If the only issue is height, just using divs seems to work:
<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>
In a simple test, the width of header/content is different in your example and mine, but I'm not sure from
your post if you're concerned about the width?
answered Sep 18 '08 at 5:25
1 That's not quite what I want to do. I want the content div to fill the remainder of the screeen, not to actually
be the same height as the screen. Vincent McNabb Sep 18 '08 at 5:33
That appears to be what my example does, at least when I try it. Do you not see that behavior? Bruce Sep
20 '08 at 2:46
add comment
add comment
4/27/2014 html - Make a div fill the height of the remaining screen space - Stack Overflow
http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space 11/11
Josh Crozier
22.3k 13 35 48
Laki Politis
27 5
vimes1984
451 5 17
3 Try putting a table inside the content, that is at size 100%. It will not work. Vincent McNabb Sep 29 '08
at 22:08
I came up with an idea for this. For approximately 92% of the people viewing my website (lakipolitis.com),
their browser is 1680x1050 or smaller. I've set my height for #main to a minimum height, then defined
the height of the footer.
body {
height: 100%;
}
#main {
min-height: 89%;
}
#footer {
height: 63px;
overflow: hidden;
}
So effectively, #main will always take up as much as 89% (never less than my content, and usually
never less than ~940px) of the viewable space, which will ALWAYS be smaller than my content.
It may not work for you, but it worked for me.
edited Oct 22 '13 at 0:07 answered Feb 18 '11 at 8:49
It can be done via Jquery very easliy:
`function footerbottom() {
var footer = $('#footer');
var getfootheight = footer.height();
var getbodyheight = $('body').height();
var decutthetwo = getbodyheight - getfootheight;
footer.css({
position: 'absolute',
top: decutthetwo
});
}
footerbottom();`
fiddle
answered Jan 27 at 11:54
Not the answer you're looking for? Browse other questions tagged html css div
html-table or ask your own question.
add comment
add comment
add comment