html - una - Posición: absoluta y altura de los padres?

formula para calcular la talla de una persona

Question

Tengo algunos contenedores y sus hijos son solo absolutos / relativamente posicionados. ¿Cómo establecer 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 de "barra" 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 contenedores.

Answer 1

Aquí está mi solución,
En su ejemplo, puede agregar un tercer elemento con "mismos estilos" de .one y .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;
}

Answer 2

Esta es otra respuesta tardía, pero descubrí una manera bastante simple de colocar el texto "barra" entre los cuatro cuadrados. Aquí están los cambios que hice; En la sección de la barra, envolví el texto de "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;
}

Answer 3

Esta es una respuesta tardía, pero al observar el código fuente, noté que cuando el video es 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 de 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/

Solo agrega esto a tu 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.

Answer 4

Si entiendo lo que estás tratando de hacer correctamente, entonces no creo que esto sea posible con CSS mientras mantengo a los niños en una posición absoluta.

Los elementos posicionados de forma absoluta se eliminan por completo del flujo de documentos y, por lo tanto, sus dimensiones no pueden alterar las dimensiones de sus elementos principales.

Si realmente tuvieras que lograr este efecto mientras mantienes a los niños como position: absolute , puedes hacerlo con JavaScript al encontrar la altura de los niños posicionados de manera absoluta después de que se hayan renderizado, y usar eso para establecer la altura del elemento principal.

Alternativamente, solo use float: left / float:right y margin para obtener el mismo efecto de posicionamiento mientras mantiene a los niños en el flujo de documentos, luego puede usar overflow: hidden en el padre (o cualquier otra técnica de clearfix) para causar su altura ampliar 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;
}