CSS 100% height layout

Question

I know this is a sort of a common problem, and I looked up some solutions, but couldn't find exactly what I was looking for.

I would like to convert this to a tableless layout.

Note: header and footer have to be set to a fixed height in pixels (50px is ok).

The main problem I'm having is that I cannot get that "big box" in the middle to behave like it does when it's done with tables. There are solutions which work OK for a variable length content (text, images), but I would like this box look and behave like a box - with borders, rounded corners and all.

Denominative

#486327 – Succedaneum

#173418 – Succedaneum

Here's an more example: reallinks.org/DIV-Header-Layout-100-Height + 2 Colummns / Left and Right – Encumbrancer

Answer 1

You can do it with table style CSS properties, but still retain table less markup (which is still a win).

Example

HTML

<div id="container">
    <div id="header"><div>header</div></div>
    <div id="content"><div>content</div></div>
    <div id="footer"><div>footer</div></div>
</div>

CSS

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

#container {
    display: table; 
    width: 100%;
    height: 100%;
    border: 1px solid red;   
    text-align: center;
}

#container > div {   
    display: table-row;   
    width: 100%;
}

#container > div > div {   
    display: table-cell;   
    width: 100%;
    border-radius:10px; 

}

#header > div {
    height:50px; 
    border:solid 2px #aaa;
}

#content > div {
    height: 100%;    
    background:#f0f4f0; 
    border:solid 2px #5a5;
}

#footer > div {
    height:50px; 
    border:solid 2px #a55;
}

jsFiddle.

Byelection

Oh, yes, I think I can :) That's pretty great. Thanks for the quick solution. – Denominative

Table-styles are not very well supported in older browsers, if that matters to you. – Provencal

Well, it doesn't matter to me (I require WebSockets anyway), but if someone comes up with an alternative answer, that might help others. It might be even better and earn some love in the form of points. – Denominative

@Beejamin Not supported in < IE8, unfortunately. – Byelection

@Alex - that's true. Also, and it doesn't apply to your example specifically, but Webkit browsers also require you to have your display:table-cell; elements wrapped in a display:table-row; and display:table; element. I guess that makes sense, but it's not always convenient to rely on having two layers of wrappers! Good answer, mate - +1 from me. – Provencal

Note that the content box doesn't have a fixed height in this solution. It will resize to accommodate a tall image in it, for example. – Corsica

Is this really table-less layout? – Albinus

@drinchev Well, they're styled like a table but the markup doesn't consist of tables. Call it what you want. – Byelection

just a small addition: add * {box-sizing: border-box} to get rid of the 2px offset due to the border – Anabranch

Answer 2

'Multiple absolute co-ordinates' is a nice way to achieve this. This is when you absolutely position a box, then give it both top and bottom co-ordinates. Without specifying a height, you get a box which wants to be 10px from the top, and 10px from the bottom edges of its parent.

Here's an example

There is an IE6 specific style you'll need to add, if you care about that browser.

Here's an article on the technique (plus the IE6 fix) - it's a good one to know, even if you don't use it for this problem.

Provencal

Well, actually I think this is even better - less markup and no specific table like remnants. I was too quick to promote the answer, so I'm very sorry but I think I have to change it to this. Didn't expect that there would be another solution. – Denominative

Worked perfectly for the app (single screen chat application). Thank you. – Denominative

Excellent solution, and so simple when you think about it! – Corsica

Wow! This is actually a much simpler way to do this! Nice answer! – Whipcord

Answer 3

You haven't said anything about heights of your sub elements, so I have had to make some presumptions. You could use percentages if you wanted.

<style>
html,body {margin:0;padding:0;
}
#mainContainer {
height:100%;
width:100%;
}

#header {
height:15%;
width:100%;
background-color:red;
}

#center {
height:75%;
width:100%;
background-color:blue;
}

#footer {
height:10%;
width:100%;
background-color:pink;
}
</style>

    <body>
    <div id="mainContainer">
    <div id="header">Header</div>
    <div id="center">Center</div>
    <div id="footer">Footer</div>

</div>

    </div>
    </body>

Morass

Yes, agreed - I edited the question. They really need to be fixed height (like 50px). – Denominative

This wouldn't work anyway. Percentage heights require the parent container to have a specified height. When the parent does not have a specified height, then height:100% is treated as height:auto. jsfiddle.net/ajVSd/1 – Catamite

@Morass can you take a look at #30107102 ? – Melva