DIV padre relativo para heredar el ancho del DIV hijo absoluto

Ten en cuenta que en la informática cualquier problema casi siempere suele tener diferentes resoluciones, pero aquí compartimos lo más óptimo y mejor.

Solución:

La respuesta corta es que lo que está preguntando básicamente no se puede hacer con CSS/HTML puro. (al menos sin tablas) Necesitaría Javascript que lea el ancho/alto de #child y luego haga el cálculo que desea hacer (no lo sé) y establezca una nueva altura/ancho en #parent.

De lo contrario, si quiere decir que desea que la altura/ancho de #child cambie de acuerdo con su contenido, por supuesto, esto es CSS nativo, simplemente configure su altura/ancho en automático y luego comience a agregar texto dentro, verá que comenzará a crecer para adaptarse a su contenido en el interior.

Como el #child se posiciona como absoluto, entonces se saca del flujo normal del documento, por lo que no afectará al #parent.

Con CSS moderno, esto es factible.

HTML:

    
Top Aligned Title
    

        
CHILD ELEMENT
    

CSS:

#parent 
    background:red;
    height: 500px;
    position:relative;

#child 
    background:green;
    position: absolute;
    top:100%;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 100px;

http://jsfiddle.net/Bushwazi/bpe5s6x3/

1. transform:translateY(-100%); es el truco Sus matemáticas se basan en el element‘s box-model.
2. También podrías combinar top:50%; con transform:translateY(-50%); para centrarlo.
3. puedes intercambiar top por left y translateY por translateX para colocar el elemento horizontalmente.

Si tienes algún titubeo o forma de ascender nuestro noticia puedes realizar una explicación y con mucho placer lo observaremos.

---

---

Utiliza Nuestro Buscador