Holy grail layout with 100% height

Posted by Henrik Skogmo on Stack Overflow See other posts from Stack Overflow or by Henrik Skogmo
Published on 2010-12-23T01:53:18Z Indexed on 2010/12/23 2:54 UTC
Read the original article Hit count: 288

Filed under:

css

|

layout

|

columns

I am trying to make a css layout that looks like this

http://oi53.tinypic.com/o0v0vp.jpg

The CSS term for this type of layout is known as the "holy grail" I think. The problem I am facing is that when I use layouts and solutions I find online I do not get them to work properly as I want them to. What I am trying to do is make a page that, regardless of content, will have the footer at the bottom of the browser and the columns stretching down to it. So far I have only seen pages that have the footer placed where the content stop, the result is some blank space under the footer.

If anyone could help me out on this it would be greatly appreciated!

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about layout

GWT layout panels vs. CSS layout

as seen on Stack Overflow - Search for 'Stack Overflow'
I read an article entitled "Tags First GWT", in which the writer suggests using GWT for event-handling, and CSS for layout. I just don't know whether the benefit of GWT's cross-browser compatibility goodness outweighs the flexibility offered by pure CSS layout. GWT GWT 2.0 has some snazzy layout… >>> More
MVC 2 View Layout CSS Control Layout

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm new to a lot of what I'm trying to do with the development of a new MVC2 web application so this is a beginner question. I need to understand my options for control and content layout on a web page. I’m using MVC2 so I’m using Controllers, Views, ViewModels, and View Templates. What I need to… >>> More
Adding to LinearLayout another Layout and handle this Layout in separate Activity

as seen on Stack Overflow - Search for 'Stack Overflow'
I have an Activity which uses a layout with a LinearLayout in it. Now I want to create in runtime a subactivity which loads some other layout and add this layout as item of my LinearLatout. How to do this? Please provide me with code example. >>> More
Creating Rich Interactions Using Blend 4: Transition Effects, Fluid Layout and Layout States (Silver

as seen on Dot net Slackers - Search for 'Dot net Slackers'
In this episode, Kenny Young of the Expression Blend team demonstrates how to make some compelling interactions using Expression Blend 4 for Silverlight 4. He demonstrates some great examples using the FluidMoveBehavior, FluidLayout, LayoutStates, Transition Effects, and sample data. Kenny then dives… >>> More
Metro: Introduction to CSS 3 Grid Layout

as seen on Stephen Walter - Search for 'Stephen Walter'
The purpose of this blog post is to provide you with a quick introduction to the new W3C CSS 3 Grid Layout standard. You can use CSS Grid Layout in Metro style applications written with JavaScript to lay out the content of an HTML page. CSS Grid Layout provides you with all of the benefits of using… >>> More