posicionamiento - CSS-posición: absoluta;-altura automática

posicionar div css

Question

Estoy teniendo un problema con algunos div''s

El div exterior tiene una altura mínima, pero los divs internos son todos de alturas variables. Debido a que los divs internos están en posición absoluta, no afectan la altura de los divs externos. ¿Hay alguna manera de hacer que estos divs internos afecten la altura del div exterior?

La razón por la que estoy diseñando estos divs con position: absolute es para que todos comiencen en la parte superior del contenedor div.

Answer 1

Aquí hay una solución de navegador cruzado con mucho retraso para su problema. No hay más width estático, no hay más trucos.

<style>
  /* clearfix */
  .container:after {
    content: '''';
    display: table;
    clear: left;
  }

  .page {
    float: left; /* display side-by-side */
    width: 100%; /* be as wide as parent */
    margin-right: -100%; /* take up no width */
  }
</style>

<div class="container">
  <div class="page"></div>
  <div class="page"></div>
</div>

Después de buscar una solución a este problema durante tanto tiempo, me sorprende ver lo simple que es. Por supuesto, los elementos .page no están posicionados absolutamente. Sin embargo, todos los mismos objetivos se pueden lograr a través de este método, casi sin dolor ni sacrificio.

Aquí hay una demostración: https://jsfiddle.net/eqe2muhv/

Esto también funciona para bloques en línea, por supuesto. Aunque es posible que necesite establecer el font-size o letter-spacing del contenedor en 0 . También recomendaría el uso de vertical-align: top en la página .page , para simular un elemento de bloque regular.

Aquí hay una demostración: https://jsfiddle.net/dzouxurs/8/

Answer 2

Creo que deberías colocarlos relativamente y simplemente cambiar "alinear verticalmente" a "arriba" en los divs interiores. Entonces no tendrás el problema de jugar con divs abs.

Answer 3

Por lo que sé, no hay forma de que los elementos secundarios posicionados de manera absoluta afecten la altura de sus elementos primarios estáticos o relativamente posicionados utilizando solo CSS. Ya sea:

• Reorganizar para que los elementos secundarios permanezcan en el flujo de documentos.
• Use JavaScript en la carga de la página para establecer la altura del padre a la altura del niño más grande

Este problema es común en presentaciones de diapositivas de JavaScript con aparición gradual / desaparición gradual, y por lo que he visto 1) la altura del contenedor principal debe definirse o 2) la altura del contenedor principal se establece dinámicamente para cada diapositiva.

Answer 4

Simplemente puedes hacer flotar los divs si quieres que estén en el mismo plano horizontal.

Answer 5

display: inline-block prueba display: inline-block en display: inline-block en el elemento que necesita altura automática.

Answer 6

Hace poco tuve este problema con una presentación de diapositivas de transición CSS de entrada / salida, y terminé resolviéndolo dando el primer elemento secundario position: relative; y la otra position: absolute; top:0; left: 0; position: absolute; top:0; left: 0; lo que garantiza que la altura de los contenedores sea la misma que la del primer elemento. Dado que mi presentación de transición de CSS usa la propiedad de opacidad, las dimensiones del contenedor nunca cambian durante el curso de la presentación de diapositivas.

Por desgracia, como también necesitaba proporcionar un respaldo de javascript para navegadores antiguos, tuve que configurar la altura del contenedor para estos navegadores de todos modos (debido a que jQuerys fadeIn / fadeOut realmente configuraba la display: none; supongo).