If I leave header 10px, footer 10px, then, how can I make the div grid, like below, take 100% page width and all height leftover after header and footer ?
Especially, I can’t make 3 and 6 to 34%. I don’t know why.
The 100% height technique you will find in this forum’s CSS FAQ sticky.
The 100% width by adding percentage will suffer from rounding errors and the pixel borders you have in your test example.
A good way to avoid rounding errors is to not float the third column, and e.g. give it a left margin of 66% or set its overflow to hidden, scroll or auto to respect the floated columns.
100% height is NOT. My question is div should take the leftover after header and footer. Usually we can calculate the div height, like window.height - footer.height - header.height, but it doesn’t work. I think it is margin, border issue, same as 100% width.
The 100% height faq should have explained why what you want is not feasible or possible in a cross browser way although it is quite a complicated subject. There is no way to say to an element start here and then just fill up the rest of the page except for this other element that I want beyond it :). You only get one shot at 100% height and that is the first element on the page and you must do all your work on this element and be creative. Subsequent elements cannot have 100% height effects because the inherited height of a min-height parent is always auto and collapses to contact height.
A webpage flows with content and content dictates the height in most cases and is usually the best method. You can use a sticky footer method where the footer is a known height and can be seen in this example. (more info in CSS faq).
The footer sticks to the bottom of the viewport when there is little content but stays at the end of the document if content is below the fold.
Alternatively you could have a fixed header and footer (position:fixed) where the header and footer are always fixed in the viewport and the rest of the page scrolls underneath. This means that you need to know the height of the header and footer beforehand so that the content can be made to scroll clear when needed. It also results in ugly scrollbars appearing everywhere.
Fixed elements have limited success in a working environment and are best for headers or small footers. IE6 doesn’t support fixed positioning which is another reason to avoid it.
If none of the above are what you require then you may need to clarify a little or provide a drawing showing the dynamics of what you want.
The “hdr” and “ftr” divs are just your header and footer; we set their height to 10px in the CSS. Everything needs to be wrapped in some “master” div, and your six divs that make the grid need to be wrapped in their own “body_content” div. Almost forgot: for best results, set “margin:0” for the body element.
Also, note that I took out the br elements and changed some of the inline styles. This allows for 100% width, including IE6.
The JavaScript here calculates the 100% height, using the formula you alluded to (window.height - header.height - footer.height):
var everything = document.getElementById("everything"),
divs = document.getElementById("cnt").getElementsByTagName("div"),
fluff_height = document.getElementById("hdr").offsetHeight;
fluff_height += document.getElementById("ftr").offsetHeight;
function window_height() { return window.innerHeight || document.documentElement.clientHeight; }
function setheight(new_height) {
var i = 6;
while (i--) { divs[i].style.height = new_height; }
}
function resize() {
setheight(0);
if (everything.offsetHeight < window_height()) {
setheight(((min_height - fluff_height) / 2) + "px");
}
}
window.onload = function () { resize(); window.onresize = resize; };
I tested it out, and it looks like it works cross-browser relatively well.
