Auto-allungare uno sfondo CSS multipart in base alle dimensioni dei contenuti

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

  •  16-09-2019
  •  | 
  •  

Domanda

Sto costruendo un sito CSS e fallisco risolvere questo problema parziali:

Sul lato sinistro c'è una scatola che consiste di tre immagini. Un'immagine in alto, un'immagine centrale (opzionale e allungata), ed un'immagine in basso.

Voglio la casella a sinistra allungare automaticamente se non v'è più contenuto all'interno. Questo funziona già per il lato destro con il mio codice corrente. (Ho messo entrambe le colonne in un div contenitore e impostare la casella a sinistra per altezza:. 100)

Ma ora ce ne saranno anche contenuti nella casella a sinistra. Questo contenuto non troppo pieno perché ho impostato la casella sinistra position: absolute. Così non aumenta le dimensioni.

non sono riuscito a ottenere questo effetto senza position: absolute però. Ho provato ad utilizzare float etc.

Ecco il codice di esempio: 

    <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 questo foglio di stile: 

#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 */
}

Ecco come si presenta (colorata per una migliore comprensione):

alt text

La parte gialla è in realtà un'immagine allungata, l'ho lasciato fuori per l'esempio, esso funziona come previsto.

Come posso aggiungere il testo nella casella di sinistra che sarà anche allungare? O è possibile con TABELLA al posto di CSS a questo punto?

EDIT: La soluzione di BitDrink guarda in questo modo al mio browser (FF corrente)

alt text http://img502.imageshack.us/img502/1241/layoutsample2 .png

È stato utile?

Soluzione

Potrei sbagliarmi qui, ma ciò che si sta cercando di ottenere qui è di due colonne della stessa altezza, non importa quanto il testo è nelle colonne a sinistra oa destra.

Colonne altezza pari con i CSS è la migliore tecnica CSS per questo, dove dagli sfondi e bordi curvi inferiori dovrebbero essere dato a div # barella verticale.

L'unico altro modo che conosco per fare due colonne uguale altezza è di usare JavaScript. Vedere L'articolo gruppo filamento sull'impostazione altezze uguali con jQuery .

Altri suggerimenti

il problema è il posizionamento assoluto! Se si desidera un ridimensionamento automatico (in verticale) del riquadro di sinistra, basta applicare un "float: left" per #bgtop! Si noti che l'attributo "min-height" non è supportato da tutti i browser (ad esempio IE6)! Il codice che segue è un esempio: 

<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>

Si può vedere il risultato qui sotto:

alt text

Il 4 div (s) ridimensionare verticalmente in base al loro contenuto!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top