Posición: ¿altura absoluta y paterna?

Tengo algunos contenedores y sus hijos solo están en posición absoluta / relativa. ¿Cómo configurar la altura de los contenedores para que sus hijos estén dentro de ellos?

Aquí está el código:

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Aquí hay un jsfiddle. Quiero que el texto " bar " aparezca entre 4 cuadrados, no detrás de ellos.

Http://jsfiddle.net/Ht9Qy /

¿Alguna solución fácil?

Tenga en cuenta que no conozco la altura de estos niños, y No puedo establecer la altura: xxx para los contenedores.

Author: Wordpressor, 2012-11-25
Source

4 answers

Si entiendo lo que está tratando de hacer correctamente, entonces no creo que esto sea posible con CSS mientras mantiene a los niños absolutamente posicionados.

Los elementos absolutamente posicionados se eliminan completamente del flujo del documento, y por lo tanto sus dimensiones no pueden alterar las dimensiones de sus padres.

Si realmente tuviera que lograr este efecto manteniendo a los hijos como position: absolute, podría hacerlo con JavaScript encontrando la altura de la absolutamente posicionado hijos después de que se han renderizado, y usando eso para establecer la altura del padre.

Alternativamente, simplemente use float: left/float:right y márgenes para obtener el mismo efecto de posicionamiento mientras mantiene a los hijos en el flujo del documento, puede usar overflow: hidden en el padre (o cualquier otra técnica de clearfix) para hacer que su altura se expanda a la de sus hijos.

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}
 65
Author: Tom Davies,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-20 13:59:51

Aquí está mi solución,
En tu ejemplo puedes añadir un tercer elemento con "mismos estilos" de.una & .dos elementos, pero sin la posición absoluta y con visibilidad oculta:

HTML

<article>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</article>

CSS

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
}
 3
Author: BBeta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-18 14:05:42

Esta es una respuesta tardía, pero al mirar el código fuente, noté que cuando el video está a pantalla completa, la clase "mejs-container-fullscreen" se agrega al elemento "mejs-container". Por lo tanto, es posible cambiar el estilo basado en esta clase.

.mejs-container.mejs-container-fullscreen {
    // This rule applies only to the container when in fullscreen
    padding-top: 57%;
}

Además, si desea hacer que su video MediaElement sea fluido usando CSS, a continuación se muestra un gran truco de Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media /

Simplemente agregue esto a su CSS: 

.mejs-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}
.mejs-mediaelement video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

Espero que ayude.

 2
Author: user3517189,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-09 21:49:00

Esta es otra respuesta tardía, pero descubrí una forma bastante simple de colocar el texto de la "barra" entre los cuatro cuadrados. Aquí están los cambios que hice; En la sección barra envolví el texto "barra" dentro de un centro y etiquetas div.

<header><center><div class="bar">bar</div></center></header>

Y en la sección CSS creé una clase "bar" que se usa en la etiqueta div anterior. Después de agregar esto, el texto de la barra se centró entre los cuatro bloques de colores.

.bar{
    position: relative;
}
 -14
Author: CESARVALLES,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-23 22:18:30