css - hacer - div html ejemplos

¿Cómo hacer un div para flotar hacia abajo?

Question

Tengo 4 divs. Uno es envoltorio externo y otros 3 son encabezado, contenido y pie de página respectivamente. Todos los son de igual ancho (fijo). Pero la altura de la envoltura exterior y el contenido div son variables.

independientemente del tamaño de estos, quiero que el pie de página div se pegue en la parte inferior de la envoltura exterior. He intentado usar el siguiente CSS

position: relative;
bottom: 0px;

Pero no funcionó. ¿Alguien sabe una solución?

Answer 1

El pie de página div tendrá que ser:

• position:absolute;bottom:0; ; Esto lo empujará a la parte inferior de su contenedor, sin embargo, cuando se desplaza más allá del contenedor, el pie de página se desplazará con él.

• position:fixed;bottom:0; ; Esto se usa más a menudo para pies de página pegajosos Esto colocará el pie de página en la bottom:0 de tu pantalla. así que no importa dónde se desplace, lo que ve es lo que obtiene (no se moverá mientras se desplaza)

• position:relative;bottom:0; ; podría ser usado, pero será relativo a sus hermanos (es decir, a menos que el div de contenido lo empuje hasta el fondo, no irá allí), o, creo que si el contenedor es relativo, puede funcionar (pero por favor, corrija) yo si me equivoco).

Basado en su pregunta: i want the footer div to stick at the bottom of outer wrapper. suena como si quisieras usar absolute posición absolute para el pie de página, para que siempre se pegue al fondo de su contenedor ...

Si desea que el pie de página permanezca en la parte inferior de la pantalla sin importar a dónde se desplace el usuario , le recomiendo fixed posición fixed .

Definitivamente echa un vistazo a algunos ... tutoriales y, lo más importante, juegue y experimente usted mismo.

Puedes convertirnos en un jsfiddle y quizás arroje más luz sobre lo que estás tratando de lograr. ¡buena suerte!

Answer 2

Para alinear un div con el fondo, primero debe hacer que la posición del div padre sea relativa. luego haga que la posición del div requerido sea absoluta y establezca la propiedad inferior a cero.

<div style="position: relative; height: 100px; border: solid;">
  <div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0;  left: 0; ">
  </div>
</div>

Answer 3

Puede dejar que la posición de la envoltura sea relativa y la posición de los Divs internos sea absoluta.

<div style="position: relative; height: 200px">
    <div style="position: absolute; top: 0px; height: 20px; background-color:red">
        header
    </div>

    <div style="position: absolute; top: 20px; bottom: 20px; overflow-y: auto">
        content
    </div>

    <div style="position: absolute; bottom: 0px; height: 20px; background-color:red">
        footer
    </div>
</div>

Prueba esto http://jsfiddle.net/YAaA3/

Answer 4

Use un claro para obtener el pie de página debajo del contenido.

simplemente -

#header {
 clear:both;
}
#footer {
 clear: both;
}

Eso debería hacer que el encabezado esté en la parte superior y que el pie de página caiga debajo de los elementos flotantes.

Answer 5

[ ACTUALIZADO ]

Aquí está el CSS que siempre pega el pie de página en la parte inferior.

*DEMO *

CSS-

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#ou {
    position:relative;
    background-color:grey;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width:400px;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer''s height */
}
#he
{
    height:30px;
    background-color:red;
}
#fo{
    background-color:yellow;
    height: 30px; /* .push must be the same height as .footer */
    position:relative;
    width:400px;
    margin:0 auto;
}

Answer 6

<div>
  <div style="position: relative; height: 10%; top: 90%; ">
  </div>
</div>