Full height and full width CSS layout_问答_开发者

I am looking for a way to create a CSS-only (no JavaScript) layout with 5 regions that looks like this:

   ┌────────────────────┐
   │          H         │
   ├────┬────────┬──────┤
   │    │        │      │
   │    │        │      │
   │    │        │      │
   │  A │    B   │  C   │
   │    │        │      │
   │    │        │      │
   │    │        │      │
   ├────┴────────┴──────┤
   │          F         │
   └────────────────────┘

(The above diagram will display correctly only if your font has the Unicode box-line-drawing characters.)

The layout must fill the available space in the web browser completely (both height and width). A, B, C must have the same height; and H and F must have the same width. I.e., there must be no gaps between the regions, except for a fixed margin. The elements inside the region should know their parents size; that means, if I place

   <textarea style="width:100%;height:100%">Just a test</textarea>

inside a region, it will extend to the full width and height of the region. There shall be no scroll bar at the right side of the browser window (because the heights of H, C, and F exactly add up to the browser client-area's height).

This is super-easy to do if you are using a <table> to do the layout. But I keep reading that using tables for formatting is a bad thing and CSS is the way to go.

I am aware that there are W3C working groups that work on extending the CSS standard by features that would make the above layout very easy to implement. These standard extensions, however, are not currently implemented by most browsers; and I need a solution that works with current browsers.

I have been looking around the many web pages that contain sample CSS layouts, but none of them can do what I described above. Most of these layouts either are not full-height, or the columns have different heights, or they require JavaScript.

Therefore, my question is: is it possible to create the above layout, using only CSS (no JavaScript, no faux columns, no <table>)? Of course, the solution should work with current web browsers.

EDIT: Based on the solution provided by Gilsham, I managed to write a sample page that generates the desired CSS-only layout (tested with Firefox 3.5.5 and IE8):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
    height:100%;    
    margin开发者_如何学C:0;
    padding:0;
    border:0;
}

div{
    margin:0;
    border:0;
}

textarea {
    margin:0;
    border:0;
    padding:0;
    height:100%;
    width:100%;
}

.content{
    display:table;
    width:100%;
    border-collapse:separate;
    height:80%;
}

.Col{
    display:table-cell;
    width:30%;
    height:100%;
}

#header,#footer{
    height:10%;
    position:relative;
    z-index:1;
}

</style>
</head>
<body>
<div id="header"><textarea style="background-color:orange;">H Just a test</textarea></div>
<div class="content">
    <div id="left" class="Col"><textarea style="background-color:lightskyblue;">A Just a test</textarea></div>
    <div id="center" class="Col"><textarea style="background-color:green;">B Just a test</textarea></div>
    <div id="right" class="Col"><textarea style="background-color:lime;">C Just a test</textarea></div>
</div>
<div id="footer"><textarea style="background-color:yellow;">F Just a test</textarea></div>
</body>
</html>

One drawback is that the divs must be specified in a particular order which is bad for search-engine optimization and for screen readers; this, however, is not important for the intended web application.

/ Frank

http://jsfiddle.net/aGG3V/

to set the header and footer height you have to set it in their style and also the .content padding and margin (this the negative version)

Hi fmunkert (and others here:),

I was just curious and thought want to try it out, so I fired up my notepad and come up with something like this:

<html>
    <head></head>
<body style="margin: 0px; padding: 0px; height: 100%; width: 100%; text-align: center;">
<div style="height: 100%; width: 100%;">

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">H</div>

<div style="height:60%; width: 100%; display: table;">
<div style="float:left; height:100%; width: 20%; background-color: yellow;">A</div>
<div style="float:left; height:100%; width: 60%; background-color: grey;">B</div>
<div style="float:left; height:100%; width: 20%; background-color: yellow;">C</div>
</div>

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">F</div>

</div>
</body>
</html>

and here's the output in Firefox:

Full height and full width CSS layout

and the output in IE8:

Full height and full width CSS layout

I tested this using Firefox 3 and IE8. Seems ok to me. Is this what you wanted? :)

Note 1: As mentioned by others, this may not be practical, but still it depends on what you / your clients want.

Note 2: If this is really what you wanted, you can edit the height and width values according to your need, and you should put those CSS rules into a separate CSS file instead of inline styles as a best practice.

The reason you can't find any CSS to do this is because the CSS spec doesn't really allow you to meet all these conditions without using at least one of the options that you don't want to use.

The Holy Grail liquid layout is 100% CSS but does not meet your height criteria on its own: http://www.alistapart.com/articles/holygrail/

You can fake the height criteria with the footer by using this method: http://www.themaninblue.com/writing/perspective/2005/08/29/

This 24Ways article has a full-height column method using absolute positioning which solves a few of your problems but creates a new one in that one of your columns is always going to overflow if the content expands: http://24ways.org/2008/absolute-columns

You will likely need to combine a number of methods to get something workable to your spec. I'd personally just use jquery because life is too short for messing around with CSS like this, but if you're dead-set on avoiding it, then prepare yourself for a lot of hacking around.

There's no easy way to get an element to fill a given depth exactly when using percentage measurements.

You could get close by anchoring the footer at the window bottom, then - if cols A and C both share a background colour but col B's background differs, set your body (or container div if present) background colour to match cols A + C to seamlessly fill the gaps beneath of those columns if they're shorter than col B.