Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Problema con Pie de Página (Footer) en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/10/2015, 15:46
Avatar de Fleon  
Fecha de Ingreso: febrero-2010
Mensajes: 138
Antigüedad: 12 años, 11 meses
Puntos: 3
Problema con Pie de Página (Footer) en CSS

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
  1. /* column container */
  2. .colmask {
  3.     position:relative;  /* This fixes the IE7 overflow hidden bug */
  4.     clear:both;
  5.     float:left;
  6.     width:100%;         /* width of whole page */
  7.     height:100%;
  8.     overflow:hidden;        /* This chops off any overhanging divs */
  9. }
  10.  
  11. .colmask:after{
  12.     content: "";
  13.     display: block;
  14. }
  15.  
  16. /* common column settings */
  17. .colright,
  18. .colmid,
  19. .colleft {
  20.     float:left;
  21.     width:100%;
  22.     height:100%;
  23.     position:relative;
  24. }
  25. .col1,
  26. .col2,
  27. .col3 {
  28.     float:left;
  29.     position:relative;
  30.     padding:0 0 1em 0;
  31.     overflow:hidden;
  32.     height:100%;
  33. }
  34. /* 2 Column (left menu) settings */
  35. .leftmenu {
  36.     background:#fff;        /* right column background colour */
  37.     height:100%;
  38. }
  39. .leftmenu .colleft {
  40.     right:75%;          /* right column width */
  41.     background:#f4f4f4; /* left column background colour */
  42.     height:100%;
  43. }
  44. .leftmenu .col1 {
  45.     width:71%;          /* right column content width */
  46.     left:102%;          /* 100% plus left column left padding */
  47.     height:100%;
  48. }
  49. .leftmenu .col2 {
  50.     width:21%;          /* left column content width (column width minus left and right padding) */
  51.     left:6%;            /* (right column left and right padding) plus (left column left padding) */
  52.     height:100%;
  53. }
  54. /* Footer styles */
  55. #footer, .colmask:after {
  56.     height: 30px !important;
  57. }
  58.  
  59. #footer {
  60.     clear:both;
  61.     float:left;
  62.     width:100%;
  63.     /*height:30px;*/
  64.     border-top:1px solid #000;
  65.     position: relative;
  66. }
  67. #footer p {
  68.     padding:10px;
  69.     margin:0;
  70. }

Esta es la estructura de la pagina donde estan las columnas y el pie de pagina:

Código HTML:
Ver original
  1. <div class="colmask leftmenu">
  2.     <div class="colleft">
  3.         <div class="col1">         
  4.             <!-- Column 1 start -->
  5.                 Contenido
  6.             <!-- Column 1 end -->
  7.         </div>
  8.         <div class="col2">
  9.             <!-- Column 2 start -->
  10.                 Contenido
  11.             <!-- Column 2 end -->
  12.         </div>
  13.     </div>
  14. </div>
  15. <div id="footer">
  16.     <p>Copyrigth 2015</p>
  17. </div>

En donde estoy fallando?
  #2 (permalink)  
Antiguo 18/10/2015, 19:27
 
Fecha de Ingreso: junio-2015
Mensajes: 54
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Problema con Pie de Página (Footer) en CSS

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.

Etiquetas: background, float, footer, página, pie, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:19.