Hola a todos, tengo problemas en asignar la altura del pie de pagina (footer), le asigno 30px o 2% aún la altura ocupa casi dos partes de la pagina hacia arriba, la pagina contiene un contenedor de columnas y dos columnas adentro y fuera está el footer, éste es el estilo:
Código CSS:
Ver original/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
height:100%;
overflow:hidden; /* This chops off any overhanging divs */
}
.colmask:after{
content: "";
display: block;
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
height:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
height:100%;
}
/* 2 Column (left menu) settings */
.leftmenu {
background:#fff; /* right column background colour */
height:100%;
}
.leftmenu .colleft {
right:75%; /* right column width */
background:#f4f4f4; /* left column background colour */
height:100%;
}
.leftmenu .col1 {
width:71%; /* right column content width */
left:102%; /* 100% plus left column left padding */
height:100%;
}
.leftmenu .col2 {
width:21%; /* left column content width (column width minus left and right padding) */
left:6%; /* (right column left and right padding) plus (left column left padding) */
height:100%;
}
/* Footer styles */
#footer, .colmask:after {
height: 30px !important;
}
#footer {
clear:both;
float:left;
width:100%;
/*height:30px;*/
border-top:1px solid #000;
position: relative;
}
#footer p {
padding:10px;
margin:0;
}
Esta es la estructura de la pagina donde estan las columnas y el pie de pagina:
Código HTML:
Ver original<div class="colmask leftmenu"> <!-- Column 1 start -->
Contenido
<!-- Column 1 end -->
<!-- Column 2 start -->
Contenido
<!-- Column 2 end -->
En donde estoy fallando?