Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
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 and HTML
height: 100%; width: 100%
#tdcontent {
height: 100%;
#content {
overflow: /* or overflow: */
&table id="page"&
&tr&&td id="tdheader"&
&div id="header"&...&/div&
&/td&&/tr&
&tr&&td id="tdcontent"&
&div id="content"&...&/div&
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?
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%.
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.
6,79131743
2015 update: the flexbox approach
There are two other answers 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
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.
height: 100%;
flex-flow:
height: 100%;
.box .row {
flex: 0 1 30
.box .row.header {
.box .row.content {
.box .row.footer {
flex: 0 1 40
&!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` --&
&div class="box"&
&div class="row header"&
&p&&b&header&/b&
&br /&(sized to content)&/p&
&div class="row content"&
&b&content&/b&
(fills remaining space)
&div class="row footer"&
&p&&b&footer&/b& (fixed height)&/p&
In the CSS above, the
property shorthands the , , and
properties to establish the flexibility of the flex items. Mozilla has a .
25.3k42961
11.4k32542
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.
12.6k103773
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.
And here are some snippets from that post,
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: position: }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: }
.scroll-y { overflow-y: }
.header.row { height: 75 top: 0; }
.body.row { top: 75 bottom: 50 }
.footer.row { height: 50 bottom: 0; }
/* end of screen rules. */
&div class="header row"&
&h2&My header&/h2&
&div class="body row scroll-y"&
&p&The body&/p&
&div class="footer row"&
2,37521540
3,06321525
Instead of using tables in the markup, you could use css tables.
&div&hello &/div&
&div&there&/div&
(Relevant) CSS
width:100%;
display:table-
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 ()
Just for completeness, here are the equivalent Html elements to css properties for the
{ display: table }
{ display: table-row }
{ display: table-header-group }
{ display: table-row-group }
{ display: table-footer-group }
{ display: table-column }
colgroup { display: table-column-group }
{ display: table-cell }
{ display: table-caption }
30.5k1077105
CSS only Approach
When you want the middle element to span across entire page vertically, you can use
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
&header&100px&/header&
&section&Expand me for remaining space&/section&
&footer&150px&/footer&
So your CSS should be
html, body {
height: 100%;
height: 100
background:
height: calc(100% - (100px + 150px));
/* Adding `100px of header and 150px of footer */
background:
height: 150
background-color:
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.
81.9k13142229
73.4k1999141
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
4,43743262
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%;
&!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"&
&title&Test&/title&
&style type="text/css"&
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
width: 100%;
background:
height: 100%;
background:
&div id="content"&
&div id="header"&
&p&Header stuff&/p&
&p&Content stuff&/p&
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.
2,65022736
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
58.2k158786
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:
padding: 0;
margin: 0;
height: 100%;
height: 50
#content {
padding-top: 50
height: 100%;
It could easily be done purely by CSS using vh:
display: width:100%; height:95vh ! overflow:
#tdcontent
float: width:100%; display:
float: width:100%; height:100%; display: overflow:
and the HTML
&div id="page"&
&div id="tdcontent"&
&div id="content"&
I checked it, It works in major browsers: Chrome, IE, and FireFox
If you can deal with not supporting old browsers (that is, MSIE 9 or older), you can do this with
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
but that has even less support from stable versions of browsers. In practice, only MSIE 10 supports this.
3,07522745
None of the solutions posted work when you need the bottom div to scroll when the content is too tall.
Here's a solution that works in that case:
&div class="table container"&
&div class="table-row header"&
&div&This is the header whose height is unknown&/div&
&div&This is the header whose height is unknown&/div&
&div&This is the header whose height is unknown&/div&
&div class="table-row body"&
&div class="table-cell body-content-outer-wrapper"&
&div class="body-content-inner-wrapper"&
&div class="body-content"&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
&div&This is the scrollable content whose height is unknown&/div&
.table-row {
display: table-
.table-cell {
display: table-
.container {
width: 400
height: 300
background:
background:
height: 100%;
.body-content-outer-wrapper {
height: 100%;
.body-content-inner-wrapper {
height: 100%;
.body-content {
bottom: 0;
2,85031734
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.
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.
and also the code below:
body, html {
height: 100%;
margin: 0;
padding: 0;
margin: 0;
padding: 0;
.additional-padding {
height: 50
background-color: #DE9;
.as-table {
height: 100%;
width: 100%;
.as-table-row {
display: table-
height: 100%;
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
&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.&/p&
&div class="additional-padding"&&/div&
&div class="as-table-row"&
&div id="content"&
&p&This is the actual content that takes the rest of the available space.&/p&
2,50111327
1,62011025
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
$(window).resize(sizeFooter);
21.3k72243
1,95321839
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"&
&title&Test&/title&
&style type="text/css"&
body, html {
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
margin: 0;
background:
#content {
height: 100%;
background:
#content #positioned {
&div id="header"&
&p&Header stuff&/p&
&div id="content"&
&p&Content stuff&/p&
&div id="positioned"&Positioned Content&/div&
3,80531233
2,65022736
I came up with an idea for this. For approximately 92% of the people viewing my website (), their browser is
or smaller. I've set my height for #main to a minimum height, then defined the height of the footer.
height: 100%;
min-height: 89%;
height: 63
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.
58.2k158786
A simple solution, using flexbox:
&div&header&/div&
&div class="content"&&/div&
html, body {
height: 100%;
flex-direction:
.content {
flex-grow: 1;
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?
3,98522240
It can be done via Jquery very easliy:
function footerbottom() {
var footer = $('#footer');
var getfootheight = footer.height();
var getbodyheight = $('body').height();
var decutthetwo = getbodyheight -
footer.css({
position: 'absolute',
top: decutthetwo
footerbottom();
73.4k1999141
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)):
&style type="text/css"&
height: 100%;
margin: 0;
padding: 0;
height: 100
background-color:
height: 100%;
background-color:
&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.offsetH
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientH
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerH
window.onload =
window.onresize =
&div class="header" id="headerId"&Hello&/div&
&div class="content" id="contentId"&
48.4k72555
3,0351253106
protected by
Thank you for your interest in this question.
Because it has attracted low-quality answers, posting an answer now requires 10
on this site.
Would you like to answer one of these
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
the current status of mangrove forests in …：在红树林的现状…
下载积分：1000
内容提示：the current status of mangrove forests in …：在红树林的现状…
文档格式：PDF|
浏览次数：4|
上传日期： 12:37:19|
文档星级：
该用户还上传了这些文档
the current status of mangrove forests in …：在红树
官方公共微信}