Problema con Pie de Página (Footer) en CSS

[Fleon]

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:

/* 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:

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">          
            <!-- Column 1 start -->
                Contenido
            <!-- Column 1 end -->
        </div>
        <div class="col2">
            <!-- Column 2 start -->
                Contenido
            <!-- Column 2 end -->
        </div>
    </div>
</div>
<div id="footer">
    <p>Copyrigth 2015</p>
</div>
 

En donde estoy fallando?

[user_fdw]

si quieres que el footer quede al final de la pagina debes manejar su atributo position en fixed, y modificar con bottom. en otras palabras el problema no es su altura sino su posicion.