Foros del Web - Ver Mensaje Individual - No consigo que el contenido empuje hacia abajo mi sticky footer.

GekoDH · #1 (**permalink**) 22/01/2015, 13:57

Hola, el caso es que hice un sticky footer porque en la portada de la web se me venía hacia arriba o me aparecían barras de scroll al encoger la ventana y demás cosas indeseables con el footer (en la portada sólo tengo una imagen de fondo con background-size:cover;), pero ahora me está dando problemas con el siguiente html, y es que el cotenido crece pero el footer se queda en la misma posición, y me estoy rompiendo la cabeza y no le encuentro solución.

Código:

<!DOCTYPE html>
<html lang="es">
   <head>
      <link href="style.css" rel="stylesheet" type="text/css"/>
      <link href="animate.css" rel="stylesheet" type="text/css"/>
      <title>Sof&iacute;a Gonz&aacute;lez Fot&oacute;grafa</title>
  </head>
  <body>
<div id="wrapper">
    <div id="header">         
    </div><!--end header -->

    <div id="navbar">
      <ul class="menu">
        <li><a href="inicio.html">inicio</a></li>
        <li><a href="#">galer&iacute;a</a>
           <ul class="submenu">
             <li><a href="#">Opcion1</a></li>
             <li><a href="#">Opcion2</a></li>
           </ul>
        </li>
        <li><a href="productos.html">Productos</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
      <ul class="menu2">
        <li><a href="https://www.facebook.com/sofiagonzalezfotografa" target="_blank">Facebook</a></li>
        <li><a href="#">Blog</a>
      </ul>
        
    </div><!--end navbar -->

    <div id="main2">
      <div class="content2">
        <p class="superior"><img src="images/1.jpg"></img>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut
        </p>
        <p class="izquierda"><img src="images/2.jpg"></img>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec 
        </p>
      </div><!--end content-->
     
      <div id="sidebar">
      </div><!--end sidebar-->
    </div><!--end main-->
</div>

<div id="footer">
  Copyright &copy;2014 Todos los derechos reservados
</div>
</body>
</html>

Código:

*{ 
    margin:0; 
    padding:0; 
} 
html, body, #wrapper{ 
    height: 100%; 
}

body > #wrapper {  /*Selecciona todos los elementos #wrapper que son hijos del elemento body*/
    height: 100%; 
    min-height: 100%;
}

#navbar{
    float: left; /* Para que se pegue a uno de los lados de la venta, da igual izquierda que derecha */
    width: 100%; /* Todo el ancho de pantalla, si no al ser flotante ocupa lo justo */
    background-color: #4D4D4D;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 13px;
}

#navbar ul.menu > li{
    float: left; /* Las opciones hacia la izquierda, para que no se cambie el orden */   
}

#navbar ul.menu2 > li{
    float: left; /* Las opciones hacia la izquierda, para que no se cambie el orden */   
}

#navbar ul.menu > li:nth-last-child(2) a{
    margin-left: 50px; /* Espacio entre la penúltima opción y la segunda */
    float: left; /* Lo puse por algo antes, pero ahora no sirve para nada */
} 

#navbar li a{
    text-decoration: none;
    color: #BABABA;
    padding: 0 13px 0 13px;  /* El padding lo ponemos aquí en vez de en "#navbar ul ul" para que el submenú quede centrado*/
    display: block;
}

#navbar a:hover{
    color: #DEDEDE;
}

#navbar > ul.menu{ /* #navbar > ul */
    float: left; /* Redundante, lo hace por defecto */
    line-height: 40px;
    list-style: none;
}

#navbar > ul.menu2{ 
    float: right; /* El menú hacia la derecha, si lo quito queda a la izquierda */
    line-height: 40px;
    list-style: none;
}

#navbar ul.submenu{  /* #navbar ul ul */
    display: none; /* Para que no se muestre el submenú por defecto */
    list-style: none;  /* Quita los puntos de las listas */
    position: absolute; /* Para que no afecte ni a la altura del navbar ni a la anchura de la opción de la que se despliega y descuadre todo */
    min-width: 100px; /* Para que el submenú tenga un ancho uniforme */
    background-color: #4D4D4D;
}

#navbar ul.submenu a{  /* #navbar ul ul a*/
     /* Borde para las opciones del submenú */
}

#navbar ul.menu li:hover > .submenu{  /* #navbar ul li:hover > ul */
    display: block; /* Para que se vea como bloque al poner el puntero encima */
    -moz-animation: fadeIn .3s ease-in ;
    -webkit-animation: fadeIn .3s ease-in ;
    animation: fadeIn .3s ease-in ;
}

#navbar li > a:after{
    content:  ' \25BE';
}

#navbar li > a:only-child:after{
    content:  '';
}

#main { 
    padding-bottom: 40px; /* Misma altura del footer, esto es para que si el contenido crece sea el padding el que se mete por detrás del footer y no parte del contenido */
    height: calc(100% - 80px);
}  

.content{
    height: 100%;
    clear: both; /* Para que no quede por debajo del #navbar, ya que ahora lo puse flotante */
}

#jumbotron{
    height: 100%;
    background-image: url(images/inicio.jpg);
    background-size: cover;
    background-position: right;
    }

#footer { 
    position: relative;
    margin-top: -40px; /* La altura del footer en negativo, para hacer que suba y no haya scroll vertical */
    line-height: 40px;
    clear:both; /* Para que no quede por debajo de elementos flotantes */
    background-color: #4D4D4D;
    text-align: center;
    color: #BABABA;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px
} 

/* PRODUCTOS*/

.content2{
	max-width: 1200px;
	height: 100%;
	clear: both; /*Para que no quede por debajo del menú y se vea una franja blanca del tamaño del menú abajo*/
	margin: 0 auto;
	padding: 20px 20px 0 20px;
    background-color: #BABABA;
}

.content2 .superior > img{
	float:left;
	margin: 0px 20px 10px 0;
}

.content2 .izquierda{
	max-width: 256px;
}

A ver si alguien me pudiese ayudar.

PD: El CSS lo tengo muy comentado porque estoy empezando en esto y si pasan varios días sin poder mirarlo luego me olvido de por qué hice lo que hice xD