Auto-estirar un fondo CSS de varias partes del tamaño del contenido

StackOverflow https://stackoverflow.com/questions/1677845

  •  16-09-2019
  •  | 
  •  

Pregunta

Estoy construyendo un sitio CSS y fallo resolver este problema parcial:

En el lado izquierdo hay una caja que consta de tres imágenes. Una imagen superior, una imagen media (opcional y estirado), y una imagen de fondo.

Quiero la casilla a la izquierda se extienden automáticamente si hay más contenido en su interior. Esto ya trabaja para el lado derecho con mi código actual. (Pongo las dos columnas en un div contenedor y establecer el cuadro de la izquierda a la altura:. 100)

Pero ahora, allí también estará contenido en el cuadro de la izquierda. Este contenido se desborde, ya me puse el cuadro de la izquierda a la posición: absoluta. Por lo tanto, no aumenta el tamaño.

no he podido conseguir este efecto sin position: absolute sin embargo. Intenté usar flotador, etc.

Aquí está el código de ejemplo: 

    <body>
    <div id="centerwrapper">
        Header etc<br/>
        <div id="verticalstretcher">
            <div id="bgtop">            
                <div id="bgbottom">         
                    <div id="bgmiddle">
                    </div>
                </div>
            </div>
            <div id="content">
                Content here will auto-stretch the container vertically (and the box to the left!)
            </div>  
        </div>
        Footer etc<br/>
    </div>
</body>

Con esta hoja de estilo: 

#centerwrapper {
    width: 500px;
    margin: 0 auto;
}
#verticalstretcher {
    position: relative;
    min-height: 280px; /* Sum of the top and bottom image height */
    width: 100%;
    background-color: orange;   
}
#bgtop {
    position: absolute;
    width: 185px; /* width of the bg images */
    height: 100%;
    background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;              
}
#bgmiddle {
    position: absolute;
    width: 100%;
    top: 250px; /* Don't cover top GIF */
    bottom: 15px; /* Don't cover bottom GIF */
    background-color: yellow; /* Repeated image here */             
}
#content {
    margin-left: 200px; /* Start the text right from the box */
}

Parece que este (de color para una mejor comprensión):

alt text

La parte amarilla es en realidad una imagen estirada, lo dejé por ejemplo, funciona como se esperaba.

¿Cómo puedo añadir texto en el cuadro de la izquierda, que también estirarlo? O es posible con tabla en lugar de CSS en este punto?

EDIT: La solución de BitDrink se ve de esta manera en mi navegador (FF actual)

texto alternativo http://img502.imageshack.us/img502/1241/layoutsample2 .png

¿Fue útil?

Solución

Podría estar equivocado aquí, pero lo que está tratando de lograr aquí es dos columnas de la misma altura, no importa la cantidad de texto está en las columnas de la izquierda o la derecha.

columnas con alturas iguales usando CSS es la mejor técnica para este CSS, donde los fondos y tendrían que ser dada a dIV # camilla vertical de bordes curvos inferiores.

La única otra forma que conozco para hacer dos columnas igual altura es utilizar JavaScript. Ver El artículo de grupos de filamentos sobre la configuración de la misma altura con jQuery .

Otros consejos

el problema es el posicionamiento absoluto! Si desea un cambio de tamaño automático (en vertical) de la caja de la izquierda, solo se aplica un "float: left" a #bgtop! Observe que el atributo "min-height" no se admite en todos los navegadores (por ejemplo IE6)! El código siguiente es un ejemplo: 

<style type="text/css" >
#centerwrapper {
    width: 500px;
    margin: 0 auto;
}
#verticalstretcher {
    min-height: 280px; /* Sum of the top and bottom image height */
    width: 100%;
    background-color: orange;       
}
#bgtop {
    float: left;
    width: 185px; /* width of the bg images */
    height: 100%;
    background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
    width: 100%;
    height: 100%;
    background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;                              
}
#bgmiddle {
    width: 100%;
    background-color: yellow; /* Repeated image here */                             
}
#content {
    margin-left: 200px;     /* Start the text right from the box */
    background-color: #FFF;
    border: 1px dotted black;
}

</style>


<body>
    <div id="centerwrapper">
        Header etc<br/>
        <div id="verticalstretcher">
            <div id="bgtop"> 
                text top                                           
                    <div id="bgmiddle">
                        text middle
                            <div id="bgbottom">
                            text bottom
                            </div> 
                    </div>
            </div>
         <div id="content">
         Content here will auto-stretch the container vertically (and the box to the left!)
    </div>
</div>
Footer etc<br/>
</div>
</body>

Se puede ver el resultado a continuación:

text alt

El 4 div (s) cambiar el tamaño vertical de acuerdo con su contenido!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top