Make a Div Fill the Height of the Remaining Screen Space

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 entirescreen.

The page has a header, which contains a logo, and account information. This could be an arbitraryheight. 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:

... ...

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. Sometimesthe content will be a real table, with it's height set to 100%. Putting header inside content will notallow 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, noregistration required.

Make a div fill the height of the remaining screen space

sign up

log in

tour

help

careers 2.0
http://stackoverflow.com/http://stackoverflow.com/abouthttp://stackoverflow.com/users/759452/adrien-behttp://stackoverflow.com/users/759452/adrien-behttp://stackoverflow.com/users/16299/vincent-mcnabbhttp://stackoverflow.com/users/16299/vincent-mcnabbhttp://stackoverflow.com/questions/tagged/htmlhttp://stackoverflow.com/questions/tagged/csshttp://stackoverflow.com/questions/tagged/divhttp://stackoverflow.com/questions/tagged/html-tablehttp://stackoverflow.com/posts/90178/revisionshttp://stackoverflow.com/users/6310/brucehttp://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-spacehttp://stackexchange.com/https://stackoverflow.com/users/signup?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f90178%2fmake-a-div-fill-the-height-of-the-remaining-screen-spacehttps://stackoverflow.com/users/login?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f90178%2fmake-a-div-fill-the-height-of-the-remaining-screen-spacehttp://stackoverflow.com/tourhttp://careers.stackoverflow.com/http://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjg0NywiY2giOjExNzgsImNyIjo1OTE5LCJkaSI6IjQxNWI3MzgyYjljNjQ5OWY4NTFlNjlmYzZmZWVlM2UzIiwiZG0iOjEsImZjIjo4ODA1LCJmbCI6MjQ0NCwia3ciOiJodG1sLGNzcyxkaXYsaHRtbC10YWJsZSIsIm53IjoyMiwicGMiOjAsInByIjoxNTY4LCJydCI6MSwicmYiOiJodHRwczovL3d3dy5nb29nbGUuY29tLyIsInN0Ijo4Mjc3LCJ1ayI6InVlMS0yMTJiOTk0ZTRmYTM0MzIzYmM2MGU3ZTYxZWZhMDE3MCIsInpuIjo0MywidHMiOjEzOTg1NTYzNzU1NzYsInVyIjoiaHR0cDovL2NhcmVlcnMuc3RhY2tvdmVyZmxvdy5jb20vIn0&s=uFnKIEq8u6c0bibo9g_1VB0a1jc



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 at3: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 thewindow 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 keepusing 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 possiblewith 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 forme. 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 thisexact 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 arelooking for an app-like layout solution, say a somehow fixed header, footer, and full height content takingup 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
http://stackoverflow.com/users/537031/sneakyhttp://stackoverflow.com/users/537031/sneakyhttp://stackoverflow.com/users/1629400/niccaihttp://stackoverflow.com/users/1629400/niccaihttp://stackoverflow.com/users/30018/johnfxhttp://stackoverflow.com/users/410072/jameshttp://stackoverflow.com/a/21225247/3128209http://stackoverflow.com/users/3128209/ameliabrhttp://jsfiddle.net/ceELs/http://stackoverflow.com/users/1818608/gill-bateshttp://stackoverflow.com/posts/90886/revisionshttp://stackoverflow.com/users/16299/vincent-mcnabbhttp://stackoverflow.com/users/16299/vincent-mcnabbhttp://stackoverflow.com/users/146807/travishttp://stackoverflow.com/users/437368/crowdersouphttp://stackoverflow.com/users/410023/dan-rosshttp://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/http://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjg0NywiY2giOjExNzgsImNyIjoxMDc2OSwiZGkiOiJlOTIwMWYyMGZlMjY0MjgzODNkMzU0NDY4MGM1ZWRmYSIsImRtIjoxLCJmYyI6MTY4ODYsImZsIjoyNDQ0LCJrdyI6Imh0bWwsY3NzLGRpdixodG1sLXRhYmxlIiwibnciOjIyLCJwYyI6MCwicHIiOjE1NjgsInJ0IjoxLCJyZiI6Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vIiwic3QiOjgyNzcsInVrIjoidWUxLTIxMmI5OTRlNGZhMzQzMjNiYzYwZTdlNjFlZmEwMTcwIiwiem4iOjQ0LCJ0cyI6MTM5ODU1NjM3NTU3OSwidXIiOiJodHRwOi8vY2FyZWVycy5zdGFja292ZXJmbG93LmNvbS9qb2JzL3RlbGVjb21tdXRlIn0&s=7mfW7VJbd9X7scNgjjqGXvfw714



h--n

2,044 1 12 24

Test /* 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; } My header

The body
My footer
answered Oct 21 '11 at 15:02

25 Theres just one problem with this: the header and footer arent auto-sized. 7KDW is the real difficulty, andWKDW 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 SampsonSep 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

hello there

(Relevant) CSS

body{ display:table; width:100%;}div
http://stackoverflow.com/users/375230/h-nhttp://stackoverflow.com/users/375230/h-nhttp://stackoverflow.com/users/33080/romkynshttp://stackoverflow.com/users/87453/luke-sampsonhttp://stackoverflow.com/users/702353/matiashttp://stackoverflow.com/users/1469208/trejderhttp://stackoverflow.com/users/1050447/adam-waite



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 tablemodel

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 answeredquestion. This is WKH 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. ,UHDOO\PLVV6LOYHUOLJKWJULGV :( TrueBlueAussie Feb 24 at 17:32

Try this, it should work in all browsers:

Test * { 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; }
http://stackoverflow.com/users/703717/danieldhttp://stackoverflow.com/users/703717/danieldhttp://jsfiddle.net/danield770/FC7eY/http://jsfiddle.net/danield770/FC7eY/1/http://caniuse.com/css-tablehttp://www.w3.org/TR/CSS2/tables.html#table-displayhttp://stackoverflow.com/posts/16960823/revisionshttp://codepen.io/anon/pen/Cucifhttp://stackoverflow.com/users/12597/ian-boydhttp://stackoverflow.com/users/13468/mlibbyhttp://stackoverflow.com/users/586086/andrew-maohttp://stackoverflow.com/users/201078/trueblueaussie



Evandro

15 4

daniels

6,153 11 44 93

Chris

3,338 3 24 53

}

#footer, #push { height: 44px; } header content footer

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 hardtime 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 IE8and up, you can use display:table and related values to get the rendering rules of tables with block-levelelements including div.

If you are even luckier and your users are using top-tier browsers (for example, if this is an intranet appon 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 theW3C 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 likeYoutube using a fair share of what's already here. Camilo Martin Aug 26 '12 at 23:36

Testbody,html{ height: 100%; margin: 0; padding: 0; color: #FFF;
http://stackoverflow.com/users/2050821/evandrohttp://stackoverflow.com/users/2050821/evandrohttp://stackoverflow.com/users/9789/danielshttp://stackoverflow.com/users/9789/danielshttp://stackoverflow.com/users/13700/chrishttp://stackoverflow.com/users/13700/chrishttp://jsfiddle.net/QFt93/http://stackoverflow.com/posts/90946/revisionshttp://stackoverflow.com/users/303056/leopdhttp://stackoverflow.com/users/57611/erikehttp://stackoverflow.com/users/90511/missingnohttp://stackoverflow.com/users/1455529/l46kokhttp://www.w3.org/TR/css3-flexbox/http://stackoverflow.com/users/801466/artem-oboturovhttp://stackoverflow.com/users/124119/camilo-martin



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;}

Header

Header stuff
Content
Content stuff

In all sane browsers, you can put the "header" div before the content, as a sibling, and the same CSS willwork. However, IE7- does not interpret the height correctly if the float is 100% in that case, so the headerneeds to be IN the content, as above. The overflow: auto will cause double scroll bars on IE (whichalways 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 UHVW 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 thebottom 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 at15: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 itthe parent height minus the header height I decided to make content div full height but position itabsolutely 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;
http://stackoverflow.com/users/1701/jerphhttp://stackoverflow.com/users/1701/jerphhttp://stackoverflow.com/users/2786995/joran-den-houtinghttp://stackoverflow.com/users/2786995/joran-den-houtinghttp://stackoverflow.com/users/999297/tonye-true-vine-productionshttp://stackoverflow.com/users/999297/tonye-true-vine-productionshttp://stackoverflow.com/users/16299/vincent-mcnabbhttp://stackoverflow.com/users/165495/casebashhttp://stackoverflow.com/posts/7794900/revisionshttp://stackoverflow.com/users/186550/adam-caseyhttp://stackoverflow.com/users/13468/mlibby



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 FlexibleBox 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 CSSproperty 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 ofbrowsers. 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 Pagenot to be white below the red footer. So i set the pages background color to red. And the contentsbackgroundcolor to white. With the contents height set to eg. 20em or 50% an almost empty page won'tleave the whole page red.

http://stackoverflow.com/users/2786995/joran-den-houtinghttp://stackoverflow.com/users/2786995/joran-den-houtinghttp://stackoverflow.com/users/806386/b-ghttp://stackoverflow.com/users/806386/b-ghttp://stackoverflow.com/users/334451/mikko-rantalainenhttp://stackoverflow.com/users/334451/mikko-rantalainenhttp://stackoverflow.com/users/2680216/josh-crozierhttp://stackoverflow.com/users/2680216/josh-crozierhttp://stackoverflow.com/users/1220637/herrtotohttp://stackoverflow.com/users/1220637/herrtotohttp://stackoverflow.com/users/1635906/user1635906http://stackoverflow.com/users/1635906/user1635906http://stackoverflow.com/posts/6409310/revisionshttp://stackoverflow.com/users/731963/yugal-jindlehttp://caniuse.com/#feat=flexboxhttp://caniuse.com/#search=gridhttp://stackoverflow.com/posts/9358676/revisionshttp://stackoverflow.com/users/486230/jeykeu



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), wherethe 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:

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.

This is the actual content that takes the rest of the available space.

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
http://stackoverflow.com/users/1016588/hemerson-varelahttp://stackoverflow.com/users/1016588/hemerson-varelahttp://stackoverflow.com/users/745250/amiramixhttp://stackoverflow.com/users/745250/amiramixhttp://jsfiddle.net/amiramix/aD6gE/http://stackoverflow.com/posts/17496982/revisionshttp://stackoverflow.com/users/16299/vincent-mcnabbhttp://stackoverflow.com/users/745250/amiramixhttp://stackoverflow.com/users/16299/vincent-mcnabbhttp://stackoverflow.com/users/745250/amiramix



Jerph

2,361 2 23 32

Vincent, I'll answer again using your new requirements. Since you don't care about the content beinghidden if it's too long, you don't need to float the header. Just put overflow hidden on the html and bodytags, and set #content height to 100%. The content will always be longer than the viewport by the heightof the header, but it'll be hidden and won't cause scrollbars.

Testbody,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;}

Header

Header stuff
Content
Content stuff
Positioned Content

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 thevery first answer. I am using that approach to rescale the with the Google Maps.

Here is the full example how to do that (works in Safari/FireFox/IE/iPhone/Andorid (works with rotation)):
http://stackoverflow.com/users/1701/jerphhttp://stackoverflow.com/users/1701/jerphhttp://stackoverflow.com/users/16299/vincent-mcnabb



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

body { height: 100%; margin: 0; padding: 0; }

.header { height: 100px; background-color: red; }

.content { height: 100%; background-color: green; }

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;

Hello

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:

header contentcontent content

In a simple test, the width of header/content is different in your example and mine, but I'm not sure fromyour post if you're concerned about the width?


1 That's not quite what I want to do. I want the content div to fill the remainder of the screeen, not to actuallybe 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
http://stackoverflow.com/users/384115/stenhttp://stackoverflow.com/users/384115/stenhttp://stackoverflow.com/users/564353/marc-audethttp://stackoverflow.com/users/564353/marc-audethttp://stackoverflow.com/users/161633/arunhttp://stackoverflow.com/users/161633/arunhttp://stackoverflow.com/users/6310/brucehttp://stackoverflow.com/users/6310/brucehttp://stackoverflow.com/posts/16251731/revisionshttp://stackoverflow.com/users/16299/vincent-mcnabbhttp://stackoverflow.com/users/6310/bruce



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 '08at 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 definedthe 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 usuallynever 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.
http://stackoverflow.com/users/2680216/josh-crozierhttp://stackoverflow.com/users/2680216/josh-crozierhttp://stackoverflow.com/users/622825/laki-politishttp://stackoverflow.com/users/622825/laki-politishttp://stackoverflow.com/users/1754467/vimes1984http://stackoverflow.com/users/1754467/vimes1984http://stackoverflow.com/questions/tagged/htmlhttp://stackoverflow.com/questions/tagged/csshttp://stackoverflow.com/questions/tagged/divhttp://stackoverflow.com/questions/tagged/html-tablehttp://stackoverflow.com/users/16299/vincent-mcnabbhttp://www.lakipolitis.com/http://stackoverflow.com/posts/5039251/revisionshttp://jsfiddle.net/vimes1984/8w7tU/1/http://stackoverflow.com/questions/ask

Make a Div Fill the Height of the Remaining Screen Space

Documents

Transcript of Make a Div Fill the Height of the Remaining Screen Space