Get div to take up 100% body height, minus fixed-height header and footer [duplicate]
From my research, this appears to be an absolutely classic CSS question, but I can’t find a definitive answer — so StackOverflow it is. How do I set a content div to take up 100% of the body height, minus the height taken up by a fixed-height header and footer?
title etc body content//CSS html, body < height: 100%; >header < height: 50px; >footer < height: 50px; >#content
what do you want to happen if the #content is larger than the viewport? do you want the footer to be pushed down or would you like the content to scroll?
when you say cross browser, is that all the latest browsers or does it have to work for older versions of ie too
8 Answers 8
this version will work in all the latest browsers and ie8 if you have the modernizr script (if not just change header and footer into div s):
html, body < min-height: 100%; padding: 0; margin: 0; >#wrapper < padding: 50px 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; >#content < min-height: 100%; background-color: green; >header < margin-top: -50px; height: 50px; background-color: red; >footer < margin-bottom: -50px; height: 50px; background-color: red; >p
As this answer seems to be being hit a lot I thought I should also give a link to this answer as it has some alternatives
Running the jsfiddle demo makes the header and footer scroll. From the question, I understand that the requirement is to have the header/footer shown even when the content is scrollable.
@AlikElzin-kilaka did you read the comments too? I asked the questions that lead me to this answer which was accepted over 2 years ago
@AlikElzin-kilaka Besides as this question is so old, it is pretty out of date and I would go with using display flex now as the support for that is now all major browsers, where as when this was answered, flex had quite limited support
Definitively that is not an answer event 2 years ago. what is the point of having fixed divs thats scrolls when the content have to have to be scrolled.
As far as it is not cross browser solution, you might be take advantage of using calc(expression) to achive that.
html, body < height: 100%; >header < height: 50px; background-color: tomato >#content < height: -moz-calc(100% - 100px); /* Firefox */ height: -webkit-calc(100% - 100px); /* Chrome, Safari */ height: calc(100% - 100px); /* IE9+ and future browsers */ background-color: yellow >footer
If you want to know more about calc(expression) you’d better to visit this site.
I wanted to just mention something for this solution. when using calc with height, it will be the calculated height of that element when the page loads. if your content container expands from loading some dynamic content, the overflow will be visible, which is fine, but if you are wanting to set a background color on the #content element, make it min-height instead of height so it will always expand content correctly.
This still came up as the top Google result when I was trying to find an answer to this question. I didn’t have to support older browsers in my project and I feel like I found a better, simpler solution in flex-box. The CSS snippet below is all that is necessary.
I have also shown how to make the main content scrollable if the screen height is too small.
html, body < height: 100%; display: flex; flex-direction: column; >header < min-height: 60px; >main < flex-grow: 1; overflow: auto; >footer
Hello Goodbye Oh yeah, as if «flex», «flex-grow», and «flex-direction» — names that open a whole black box full of behavior — is more clear than a simple vertical offset. I’ll stick with the negative margins.
@Triynko, I agree that using negative margins is a fine solution, but it didn’t fit my needs. The solution I provided has the advantage of always having the header and footer shown on the page and the rest of the content filling the screen and being scrollable.
This is the method of the future. No need to know the exact height of your header/footer either. Percentages are now possible.
Currently most browsers support flex. I think I’ll go with this solution. Due to responsiveness this seems the best solution
@John, Without being able to see what you have it’s difficult to know for sure. For flexbox elements that are not sizing as expected I would scrutinize the flex-basis, flex-grow, and flex-shrink properties — or just flex, which can incorporate all 3 — on the child element which is not the expected size, your main in this case. I included this above, but I’ll include it again here, CSS-Tricks’ Complete Guide To Flexbox is a Godsend. css-tricks.com/snippets/css/a-guide-to-flexbox Still having trouble? Re-create the bare minimum in Codepen and post a link. codepen.io/pen
The new, modern way to do this is to calculate the vertical height by subtracting the height of both the header and the footer from the vertical-height of the viewport.
//CSS header < height: 50px; >footer < height: 50px; >#content
Great, simple solution (using calc). I’ll also point out that calc can work with % values in addition to vh and vw.
Trying to calculate the header and footer is bad 🙁 A design should be simple, self explanatory. Plain easy. Calculations are just. not easy. Not easy for human and a bit hard on machines.
What you’re looking for is a subset of the Holy Grail design.
Here’s an implementation using the flex display. It includes side bars in addition to the footer and header. Enjoy:
HEADER
------------ NAV| CONTENT - START
for (var i=0 ; i
CONTENT - END |SIDE ------------
FOOTER 2.5 years after the question was asked, hope the requirements now allow IE10: caniuse.com/#feat=flexbox
You can take advatange of the css property Box Sizing.
Thanks, but this doesn’t work with lots of body content: jsfiddle.net/8Hqm5/1 I think @Pete’s solution is better for handling cases where the size of the body content is unknown.
This question has been pretty well answered, but I’m taking the liberty of adding a javascript solution. Just give the element that you want to ‘expand’ the id footerspacerdiv , and this javascript snippet will expand that div until the page takes up the full height of the browser window.
It works based on the observation that, when a page is less than the full height of the browser window, document.body.scrollHeight is equal to document.body.clientHeight. The while loop increases the height of footerspacerdiv until document.body.scrollHeight is greater than document.body.clientHeight. At this point, footerspacerdiv will actually be 1 pixel too tall, and the browser will show a vertical scroll bar. So, the last line of the script reduces the height of footerspacerdiv by one pixel to make the page height exactly the height of the browser window.
By placing footerspacerdiv just above the ‘footer’ of the page, this script can be used to ‘push the footer down’ to the bottom of the page, so that on short pages, the footer is flush with the bottom of the browser window.
//expand footerspacer div so that footer goes to bottom of page on short pages var objSpacerDiv=document.getElementById('footerspacer'); var bresize=0; while(document.body.scrollHeight <=document.body.clientHeight) < objSpacerDiv.style.height=(objSpacerDiv.clientHeight+1)+"px"; bresize=1; >if(bresize) Here’s a solution that doesn’t use negative margins or calc . Run the snippet below to see the final result.
Explanation
We give the header and the footer a fixed height of 30px and position them absolutely at the top and bottom, respectively. To prevent the content from falling underneath, we use two classes: below-header and above-footer to pad the div above and below with 30px .
All of the content is wrapped in a position: relative div so that the header and footer are at the top/bottom of the content and not the window.
We use the classes fit-to-parent and min-fit-to-parent to make the content fill out the page. This gives us a sticky footer which is at least as low as the window, but hidden if the content is longer than the window.
Inside the header and footer, we use the display: table and display: table-cell styles to give the header and footer some vertical padding without disrupting the shrink-wrap quality of the page. (Giving them real padding can cause the total height of the page to be more than 100% , which causes a scroll bar to appear when it isn’t really needed.)
.fit-parent < height: 100%; margin: 0; padding: 0; >.min-fit-parent < min-height: 100%; margin: 0; padding: 0; >.below-header < padding-top: 30px; >.above-footer < padding-bottom: 30px; >.header < position: absolute; top: 0; height: 30px; width: 100%; >.footer < position: absolute; bottom: 0; height: 30px; width: 100%; >/* helper classes */ .padding-lr-small < padding: 0 5px; >.relative < position: relative; >.auto-scroll < overflow: auto; >/* these two classes work together to create vertical centering */ .valign-outer < display: table; >.valign-inner
My webpage Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory © 2005 Old Web Design Full screen page with 100% body height
Is there any way to make a page with header, sticky footer and the body should always fit 100% of the screen height — header and footer, with only HTML and CSS. See the image for more.
3 Answers 3
You can use an approach which allows you to keep the body at 100% height and have a sticky footer as well using a modern sticky footer approach:
Steps to achieve this:
1. box-sizing:border-box;
4. container: absolute positioned with a top of the header height.
5. footer: absolute positioned with left and bottom:0;
Look at this demo:
html < box-sizing: border-box; >*, *:before, *:after < box-sizing: inherit; >html < position: relative; height: 100%; >body < text-align:center; min-height: 100%; margin:0; overflow:hidden; >footer < position: absolute; left: 0; bottom: 0; height: 50px; /* Height of Footer */ width: 100%; >header < height: 50px; /* Height of header */ line-height:50px; /* vertical align the title*/ width: 100%; background-color:lightgreen; >.container < background-color: darkgreen; height: 100%; position: absolute; top: 50px; /* Height of header */ left: 0; bottom: 0; width: 100%; right: 0; >footer< background-color:yellow; line-height:50px; /* vertical align the title*/ >Inspecting you will see that the body will always be 100% height and the footer will be sticky at the bottom.
Ps. Added box-sizing: border-box just because it’s a good practice but it’s not necessary for this approach.
how to make DIV height 100% between header and footer
Is there a way to setup a layout so that the header is 50px, body is 100% and footer is 50px? I would like the body to use up the entire viewing area at minimum. I would like to have the footer and header to be on the screen at all times
3 Answers 3
I created an example in jsfiddle:
html < height: 100%; >body < height:100%; min-height: 100%; background: #000000; color: #FFFFFF; position:relative; >#header < height:50px; width:100%; top:0px; left:0px; background: #CCCCCC; position:fixed; >#footer < height:50px; width:100%; bottom:0px; left:0px; background: #CCCCCC; position:fixed; >#content < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height:100%; padding: 0 20px; >#content > div
Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside.
Would be nice to include some code here in case JSFiddle isn’t available. BTW, the box-sizing: border-box; doesn’t seem to make any difference.
Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside.
Just a fix for Andreas Winter solution:
*With the solution of it, you would have problems if the content is greater than the available window area.
Thanks for this — I was struggling with fixed header and footer with scrollable 100% center area. This is perfect, can now have EPIC layouts. ^__^
I think what you’re looking for is «multiple absolute coordinates». A List Apart has an explanation here but basically, you just need to specify the body’s position as absolute, and set both top: 50px and bottom: 50px :
#header < position: absolute; height: 50px; >#body < position: absolute; top: 50px; bottom: 50px; background-color: yellow; >#footer Header Content goes here Footer Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.