CSS necessidade barra lateral altura de expandir com conteúdo

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

  •  05-07-2019
  •  | 
  •  

Pergunta

Eu tenho um layout de duas colunas, com uma barra lateral cinza à direita. Eu preciso a altura da barra lateral para expandir quando a altura da coluna da esquerda é aumentada (devido ao conteúdo que está sendo expandida dinamicamente). Eu posso fazer a barra lateral caber uma página estática, mas eu não posso obtê-lo a aumentar de tamanho com o resto da página. Fiz algumas pesquisas no Google, mas não conseguiu encontrar uma solução alternativa que funcionou para mim.

Alguém sabe como fazer isso?

Foi útil?

Solução

Este é um problema comum quando se utiliza DIVS para este tipo de layout.

Se você google 'coluna do falso' você deve obter algumas respostas.

por exemplo. http://www.alistapart.com/articles/fauxcolumns/

Outras dicas

Isto pode ser um pouco fora, mas se você usar jQuery em seu site você pode executar um cálculo rápido e redimensionar todas as DIVs compartilhando uma classe similar à altura máxima: 

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

Eu tenho sido perseguido por este problema por um tempo e eu escrevi um artigo sobre esse problema: Feito com faux colunas . Aqui está o que eu argumentei:

solução baseada

JavaScript para este problema não é pior do que qualquer outra solução. De fato, se você estiver usando JavaScript, você pode economizar algumas horas da frustração de tentar fazer as coisas trabalhando. As pessoas vão avisá-lo contra isso dizendo “O que vai acontecer se o usuário desligado JavaScript? “. Acredite em mim, se o usuário tiver desligado JavaScript, a maior parte da web é quebrado para ele de qualquer maneira. Sua barra lateral não importava para ele.

Como cballou mencionado, a maneira mais simples de fazer isso é usar o código JQuery: 

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

Eu mudei o background-color para a mesma cor como a minha barra lateral, nessa página específica, apesar de eu ter fundos para todas as minhas seções em vez de um fundo geral. Mas isso pode não funcionar para todos.

Na minha folha de estilo, 

.sidec
{
background-color:#123456;
}

Na minha página HTML, 

<body class="sidec">

content....

</body>

Recentemente, vi uma solução bastante criativa para esse problema usando o position:absolute propriedades CSS e border.

Vale a pena experimentar para ver se ele funciona para você.

Link: http: //woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

Eu não tenho certeza se isso vai ajudar, como eu sou um novato. No entanto, quando lutando com a obtenção minha barra lateral para mostrar todo o conteúdo quando eu duplicou o seu tamanho eu fiz o seguinte. Eu estava mudando a minha altura e largura sem resposta até que eu mudei a classe. Minha classe foi listado largura SB quadro SB. Então, quando eu mudei de classe para ler SB altura SB largura lo apto para o meu conteúdo em vez do tamanho original quadro. Eu também tentei largura SB máximo sb com trabalhei muito, mas levou a minha barra de menu de rodapé (o que significa que não mostrá-lo mais). Voltei à altura SB SB largura, e está tudo bem. Isso é super duper elementar para todos vocês eu tenho certeza, mas apenas no caso há um outro novato lendo este que não entende muito sobre o código html como eu ... Espero que isso ajude =) Holidays todos feliz! abraços, tara

Eu estou supondo que você deseja aplicar certo efeito ao seu layout de tal forma que ele vai exigir ambas as colunas para redimensionar juntos. Se você quiser alterar dinamicamente os valores da altura das colunas, eu duvido que ele vai trabalhar apenas com css a menos que você implementar algumas javascript para controlar o estilo.

Como Dal sugeriu, fazer olhada no link em colunas faux. Tal como o nome sugere, a solução não é muito sobre como modificar a altura colunas. Em vez disso, ele dá a "ilusão" de que ambas as colunas parecem ser da mesma altura quando na realidade eles não são - e é com o uso de telhas de imagem de fundo de

.

A idéia é que não há necessidade de complicar o mark-up. estrutura simples com um toque de "ilusão" com imagens é uma prática comum em web design.

Saudações, Jonas

Com a má atitude em relação a novos membros aqui eu esperar para ser barracked para esta resposta, aqui vai. Eu tenho em torno deste problema através da criação de um fundo imagem 960px de largura 1px alta com as duas cores que eu precisava para as colunas em suas respectivas larguras (780px e 180px). Então, usei isso como a imagem de fundo para o meu recipiente repetido no eixo y e fez o conteúdo e barra lateral background-color direita:. Transparente 

 .container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}

.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}

.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}

Estou certo de que este método tem suas limitações, mas ele funciona perfeitamente em todas as minhas páginas.

É possível que eu não tenha explicado isso muito bem, nesse caso, ser bom nisso você por favor. Vou endevour para expandir meu método (que é provavelmente o conhecimento já comum).

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