Como criar o conteúdo com colunas de 100% de altura e de altura igual neste layout?

Question

Feb 06, 2012, 11:53 AM

Como criar o conteúdo com colunas de 100% de altura e de altura igual neste layout?

Eu tenho esse layout em que o my_menu é fixado na parte superior, seguido pelo cabeçalho, seguido pelo conteúdo com 960px e centralizado, no qual 3 colunas foram flutuadas para a esquerda e finalmente seguidas por um rodap

O problema é como estender o conteúdo até a altura de 100%, mesmo que não haja conteúdo suficiente em nenhuma das colunas filh

Como tornar as 3 colunas iguais em altura, independentemente do conteúdo de qualquer coluna?

Mantenha o rodapé pegajoso! CSS puro, sem JavaScript, sem JQuery!

A marcação HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Document Title</title> 
<link rel="stylesheet" href="main.css" type="text/css" /> 
</head> 
<body id="index"> 
<div id="wrapper"> 
    <div id="my_menu"> 
    FIXED MENU WIDTH 100% 
    </div> 
    <div id="my_header"> 
    HEADER WIDTH 100% 
    </div> 
    <div id="content"> 
        <p>CONTENT 960px</p> 
        <div id="col1" class="content_columns"> 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        </div> 
        <div id="col2" class="content_columns"> 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        </div> 
        <div id="col3" class="content_columns"> 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        </div> 
        <div class="clear_floats"></div> <!-- For Clearing Floats --> 
    </div> 
    <div class="push"></div> <!-- For Sticky Footer --> 
</div> 
    <div id="my_footer"> 
    STICKY FOOTER WIDTH 100% 
    </div> 
</body> 
</html>

Os estilos CSS

* /* For CSS Reset */ 
{ 
padding: 0; 
margin: 0; 
} 

html, body 
{ 
width: 100%; 
height: 100%; 
} 

div#wrapper 
{ 
width: 100%; 
height: 100%; 
min-height: 100%; /* For Sticky Footer */ 
height: auto !important; /* For Sticky Footer */ 
margin: 0 auto -70px; /* For Sticky Footer */ 
} 

div#my_menu 
{ 
width: 100%; 
height: 50px; 
outline: 1px solid black; 
background-color: grey; 
text-align: center; 
position: fixed; 
} 

div#my_header 
{ 
width: 100%; 
height: 100px; 
outline: 1px solid black; 
background-color: yellow; 
text-align: center; 
padding-top: 50px; 
} 

div#content 
{ 
width: 960px; 
margin: 0 auto; 
outline: 1px solid black; 
background-color: brown; 
text-align: center; 
} 

div.content_columns 
{ 
width: 320px; 
outline: 1px solid black; 
background-color: gold; 
text-align: center; 
float: left; 
} 

div.clear_floats /* For Clearing Floats */ 
{ 
clear: both; 
} 

div#my_footer 
{ 
width: 100%; 
height: 70px; 
outline: 1px solid black; 
background-color: pink; 
text-align: center; 
} 

div.push /* For Sticky Footer */ 
{ 
height: 70px; 
}