1

Hola mi estructura html sería:

.navbar {
  background-color: #62ADD6;
  font-size: 15px;
  border: 0;
  position: fixed;
  height: 80px;
}

#pie {
  display: block;
  position: absolute;
  background-color: #2f43c1;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100px;
  padding-top: 5px;
}

#section {
  display: block;
  position: absolute;
  font-size: 20px;
  top: 80px;
  color: blue;
  /*height: calc(100% - 120px);*/
  height: 750px;
  background-color: black;
  width: 100%;
  padding: 5px;
}
<nav></nav>
<section></section>
<footer></footer>

¿Cómo podría hacer que el footer estuviera debajo del section y aunque este se hiciera más grande que el tamaño de la pantalla el footer se bajara con el final del section?

5
  • 2
    Hola Bsg, bienvenid@. Que es lo que has intentado hasta ahora? Por que no te ha funcionado? errores/problemas? Un saludo.
    – lois6b
    el 28 mar. 2017 a las 8:42
  • 1
    el footer tiene esto: #pie{ background-color:#2f43c1; bottom: 0; position:absolute; width:100%; height:100px; } /n pero al meter cosas de gran tamaño en el section se mete por debajo y el footer se queda en el mismo lugar.
    – bsg
    el 28 mar. 2017 a las 8:44
  • 1
    Hola bsg, pon el código completo... y dinos si estás aplicando alguna hoja de estilos ya definida por ti o genérica.
    – Eduardorq
    el 28 mar. 2017 a las 8:44
  • 1
    El css es definido por mi. Ya está puesto el css.
    – bsg
    el 28 mar. 2017 a las 8:59
  • 1
    Si no se añade nada entre las etiquetas da igual que se pueda ejecutar... No se ve el resultado.
    – OscarR
    el 28 mar. 2017 a las 9:02

1 respuesta 1

3

No se muy bien lo que preguntas. Con un display block estaría un bloque debajo del anterior segun su disposición en el HTML, p.e.:

    	nav,
    	footer,
    	section { 
    		display: block;
    		height: 100px;
    	}
    	nav {
    		background: grey
    	}
    	footer {
    		background: pink
    	}
    	section {
    		background: blue
    	}
    
    <nav></nav>
    <section></section>
    <footer></footer>

Nota: las alturas y colores de fondo están para permitir ver los elementos diferenciados entre si.

4
  • 1
    y una vez puesto quiero que el footer al poner en el section muchas cosas se vaya bajando con la altura del section.Y a mi lo que me pasa es que se queda quieto el footer y el section pasa por él.
    – bsg
    el 28 mar. 2017 a las 9:02
  • 1
    @bsb yo creo que no debes poner una altura al section, este crecerá dinámicamente con los contenidos y el footer quedaría debajo. Puse alturas porque al no tener contenido las cajas no se verían.
    – Orici
    el 28 mar. 2017 a las 9:11
  • 1
    voy a probarlo muchas gracias.
    – bsg
    el 28 mar. 2017 a las 9:13
  • 1
    @bsg dar la gracias nunca esta de mas, pero stackoverflow tiene un mecanismo mucho mejor, puede leer el recorrido de bienvenida, para entender mejor como funciona el sitio, y si esta respuesta ayudo o soluciono su problema proceder como corresponda. Saludos el 28 mar. 2017 a las 11:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.