El div dentro de otro div de la imagen y el código de abajo. Porque va a ser el texto y las imágenes de el div padre. Y rojo div será el último elemento de la matriz div.

¿Cómo puedo enviar un interior <div> a la parte inferior de su padre <div>?

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>
  • Así es el código de la div padre, lógicamente, se coloca encima del div hijo? Son las imágenes y el texto agrega dinámicamente? ¿Cuál es la pregunta específica?
InformationsquelleAutor uzay95 | 2010-01-27

8 Comentarios

  1. 196

    Esta es una manera

    <div style="position: relative; 
                width: 200px; 
                height: 150px; 
                border: 1px solid black;">
    
        <div style="position: absolute; 
                    bottom: 0; 
                    width: 100%; 
                    height: 50px; 
                    border: 1px solid red;">
        </div>
    </div>

    Pero debido a que el interior div está posicionado absolutamente, siempre tendrás que preocuparte de otro contenido en el div externa de superposición (y siempre tendrás que fijas las alturas).

    Si usted puede hacerlo, es mejor hacer que el interior div el último objeto DOM en su exterior div y la tengo configurada para «clear: both».

    • Gracias por tu explicación y el IE Hack (si no me equivoco has añadido **width: 100% para IE Hack).
    • Nope, el width: 100% estaba allí en el original – yo no lo agregue.
    • Traté de negrita las secciones que he cambiado, pero la Reducción no se aplica en el interior de los bloques de código 😛
    • 🙂 En realidad yo no podía conseguir lo que estamos hacking es decir, con símbolos, es por eso que pensé que se IE Hacking 🙂
    • Esto funciona de maravilla. Gracias por la clara explicación!
    • Sólo ten en cuenta que si el contenedor principal es flotante, este enfoque no funcionará.

  2. 73

    Hacer que el div externa position="relative" y el interior de la div position="absolute" y el conjunto es bottom="0".

    • gran solución 🙂
    • y width=100% demasiado.
    • Sí, esto funciona, pero el posicionamiento absoluto se rompe la «disposición natural». Interior del div altura no se incluirán como la altura de los padres y como el div externa se reduce, puede ver la superposición con otras cosas en el exterior de la div.
    • Me gustaría nombrar a este como el aceptado respuesta..
  3. 55

    Un flexbox manera.

    HTML:

    <div class="parent">
      <div>Images, text, buttons oh my!</div>
      <div>Bottom</div>
    </div>

    CSS:

    .parent {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    /*  not necessary, just to visualize it */
    
    .parent {
      height: 500px;
      border: 1px solid black;
    }
    
    
    .parent div {
      border: 1px solid red;
    }

    ¿Cómo puedo enviar un interior <div> a la parte inferior de su padre <div>?

    Edición:

    Fuente – Flexbox Guía

    Compatibilidad del navegador con flexbox – Caniuse

    • OMG, ¿dónde has estado toda mi [programación] de la vida! 😉 Me encanta que esto es tan simple y no meterse con el posicionamiento, y parece justo sobre el trabajo en todos los navegadores: caniuse.com/#feat=flexbox. Esta debe ser la solución y aceptado respuesta para la programación moderna.
    • Flexbox es generalmente el «camino fácil» en estos días y tiene (casi) gran navegador soporte y documentación. La adición de la caniuse enlace a la respuesta.
  4. 8

    Puede que no desee posicionamiento absoluto porque rompe el reflujo: en algunas circunstancias, la mejor solución es hacer que el abuelo elemento display:table; y el elemento primario display:table-cell;vertical-align:bottom;. Después de hacer esto, usted debe ser capaz de dar lo que el niño los elementos display:inline-block; y se automágicamente flujo hacia la parte inferior de la matriz.

  5. 8

    Nota : Esta no es la mejor manera de hacerlo!

    Situación :
    Tuve que hacer el mismo thign sólo que yo no era capaz de añadir ningún extra divs, por lo tanto me quedé con lo que había y en vez de quitar innerHTML y la creación de otro a través de javascript casi como 2 hace necesitaba tener el contenido en la parte inferior (animado bar).

    Solución:
    Dado lo cansado que estaba en el momento en que sus parece normal pensar de tal método, sin embargo, yo sabía que tenía un padre elemento DOM que la altura de la barra fue a partir de.

    Lugar de meterse con el javascript alguna más he utilizado un (NO SIEMPRE es BUENA IDEA) CSS respuesta! 🙂

    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);

    Sí eso es correcto, en lugar de colocación de la DOM, me dio su padre al revés en el css.

    Para mi situación se va a trabajar! Posiblemente para los demás también ! No Llama! 🙂

    • Esta puede no ser la mejor manera posible de hacerlo pero esta es bastante impresionante, muy creativo enfoque. Yo mismo he sido de lucha libre de este problema por un tiempo de hoy, mis principales puntos de fricción: no establecido alturas, debe estar completamente fluido (no hay suficientes caracteres para explicar por qué la pantalla: tabla no trabajaba). Esta manejado todo bien; las imágenes dentro de la div también se volcó cuando esto sucede, así que sólo he usado la clase sobre los elementos para darles la vuelta. Se ve exactamente como debe ser, con no establecer las alturas. Un poco chapucero pero bueno, a veces no hay mejor alternativa. Bien hecho!
  6. 7

    Aquí es otro puro CSS truco, que no afectan a los elementos de flujo.

    CSS:

    #parent {
      min-height: 100vh; /* set height as you need */
      display: flex;
      flex-direction: column;
      background: grey;
    }
    .child {
      margin-top: auto;
      background: green;
    }

    HTML:

    <div id="parent">
      <h1>Positioning with margin</h1>
      <div class="child">
        Content to the bottom
      </div>
    </div>

    • Impresionante uno si no desea establecer una altura sobre el div padre! Gracias!
  7. 4

    Aquí es la forma de evitar absoluta divs y tablas si usted sabe de los padres de altura:

    <div class="parent">
        <div class="child"> <a href="#">Home</a>
        </div>
    </div>

    CSS:

    .parent {
        line-height:80px;
        border: 1px solid black;
    }
    .child {
        line-height:normal;
        display: inline-block;
        vertical-align:bottom;
        border: 1px solid red;
    }

    JsFiddle:

    Ejemplo

  8. 0
    <div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
        <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
        </div>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here