Auto-esticar um fundo CSS multipart pelo tamanho do conteúdo

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

  •  16-09-2019
  •  | 
  •  

Pergunta

Estou construindo um site CSS e não conseguem resolver este problema parcial:

No lado esquerdo há uma caixa que consiste em três imagens. Uma imagem de cima, um (opcional e esticado) imagem secundária, e uma imagem de fundo.

Eu quero que a caixa para o trecho deixou automaticamente se não está dentro mais conteúdo. Isso já trabalha para o lado direito com o meu código atual. (Eu coloquei ambas as colunas em um recipiente div e definir a caixa da esquerda à altura:. 100)

Mas agora não será também o conteúdo na caixa à esquerda. Este conteúdo faz estouro porque eu definir a caixa da esquerda para position: absolute. Assim, não aumenta o tamanho.

Eu não conseguem obter esse efeito, sem posição: embora absoluta. Eu tentei usar flutuador etc.

Aqui está o código exemplo: 

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

Com esta folha 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 (Colorido-lo para uma melhor compreensão):

text alt

A parte amarela é na verdade uma imagem esticada, deixei-o para fora para o exemplo, ele funciona como esperado.

Como posso adicionar texto na caixa esquerda, que também vai esticá-lo? Ou é possível com tabela em vez de CSS neste momento?

EDIT: A solução da BitDrink parece deste modo no meu navegador (FF atual)

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

Foi útil?

Solução

Eu posso estar errado aqui, mas o que você está tentando alcançar aqui é duas colunas de mesma altura, não importa quanto texto é nas colunas esquerda ou direita.

altura igual colunas usando CSS é a melhor técnica CSS para este onde pelos fundos e bordas curvas de fundo teria de ser dado a div maca vertical #.

A única outra maneira que eu conheço para fazer duas colunas mesma altura é usar JavaScript. Consulte artigo grupo A Filament sobre a configuração alturas iguais com jQuery .

Outras dicas

o problema é o posicionamento absoluto! Se você quiser um redimensionamento automático (na vertical) do caixa da esquerda, basta aplicar uma "float: left" para #bgtop! Observe que o atributo "min-height" não é suportado a partir de todos os navegadores (por exemplo IE6)! O código a seguir é um exemplo: 

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

Você pode ver o resultado abaixo:

text alt

O 4 div (s) redimensionar verticalmente de acordo com o seu conteúdo!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top