CSS: posición relativa relativa del elemento principal a la altura del niño con posición absoluta

Question

Estoy intentando crear una presentación de diapositivas simple. Hasta el momento, el margen de beneficio básico es el siguiente:

<h1>My Slideshow</h1> 

<p>This paragraph behaves as expected.</p> 

<div class="slide-container"> 
    <div class="slide"> 
    <h2>First Slide</h2> 
    <p>Some stuff on this slide…</p> 
    </div> 

    <div class="slide"> 
    <h2>Second Slide</h2> 
    <p>And some more stuff here…</p> 
    </div> 
</div> 

<p>This paragraph will disappear beneath the stacked images.</p> 

Este es el CSS correspondiente:

.slide-container { 
    position: relative; 
} 

.slide { 
    position: absolute; 
    top: 0; 

    /* just for the looks */ 
    width: 20em; 
    padding: 0 1em; 
    border: 1px solid steelblue; 
    background: white; 
} 

El problema es, que el .slide-container no se ajusta a la altura de su hijo (o hijos) .slide (ver captura de pantalla).

Sé que puedo ajustar la altura de la .slide-container manualmente, pero quiero poner esto en una cuadrícula fluida, donde la altura es variable. ¿Hay alguna forma de lograr esto?

Answer 1

Los elementos posicionados de forma absoluta se asocian lógicamente con su elemento primario, pero no "físicamente". No forman parte del diseño, por lo que el elemento principal no puede ver realmente su tamaño. Necesita codificar el tamaño usted mismo, o olerlo con JavaScript y configurarlo en tiempo de ejecución.

Answer 2

Se puede usar esta usando jQuery:

function sliderheight(){ 
     divHeight = $('.slide').height(); 
     $('.slide-container').css({'height' : divHeight}); 
    } 
    sliderheight(); 

Esto cambiará el tamaño del div 'slide-contenedor' tener la misma altura que el div 'slide'.

Puede hacer que responda llamando a la función en el disparo de un evento de cambio de tamaño ':

$(window).resize(sliderheight); 

Espero que esto ayude.

Answer 3

La forma perfecta de hacer esto es establecer las dimensiones relativas de los padres, es decir, el ancho de la altura & para adaptarse a los niños absolutos.

http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

Este hombre escribió suficiente para entender los conceptos básicos de posicionamiento CSS. En realidad, el padre relativo se usa para posicionar lógicamente a su hijo absoluto. Pero no comparte la posición física, como resultado, no se estira para cubrir a los niños relativos.