1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Div height CSS

Discussão em 'Web Development' iniciada por candycane, 2 de Julho de 2008. (Respostas: 10; Visualizações: 2385)

  1. candycane

    candycane Power Member

    Ola comunidade! :)

    Eu tenho 3 divs (#esq, #meio, #dir), as 2 primeiras têm float:left e a 3º float:right.
    a 1º e a 3º div têm uma imagem de fundo que eu quero k se repita y.

    Só que estou com um problema... como é que eu faço com que a imagem de fundo da 1º e 3º div se repita ao longo de y consoante o tamanho da 2ºdiv?


    CSS:
    Código:
    #main {
     width: 860px; 
     margin-left:auto;
     margin-right:auto;
     
    }
    #esq {
     background-image: url(imagens/esq.jpg);
     background-repeat: repeat-y;
     width: 30px; 
     float: left;
     overflow: auto;
    }
    #meio {
     float: left;
     width: 800px;
     background-color: #FFFFFF;
     overflow: auto;
    }
    #dir {
     float: right;
     width: 30px;
     background-image: url(imagens/dir.jpg);
     background-position: 0 0;
     background-repeat: repeat-y;
    }
     
    
    HTML:
    Código:
    <div id="main">   
            <div id="esq"></div>
            <div id="meio"></div>
            <div id="dir"></div>    
    </div>
    
     
  2. hYpe

    hYpe [email protected] Member

    Sem ter a certeza do que estou a dizer, experimenta por height: 100%; nas que queres q crescam.

    Outra solução possível e' pores as divs umas dentro das outras, i.e. esquerda[meio[direita]].

    Assim todas vao crescer para o tamanho da div da direita.

    EDIT:

    Mas a ideia disso e' pores um background a toda a altura?

    Porque não aplicas o background directamente na #main?
     
    Última edição: 2 de Julho de 2008
  3. candycane

    candycane Power Member

    eu tenho 2 imagens, uma pra esq e outra pra dir, no meio n tenho imagem nenhuma....
    O que achei estranho foi da div main n crescer consoante a div meio, pk a div principal é a main :(
     
  4. hYpe

    hYpe [email protected] Member

    Se todas teem float: left/right, e a main não, ela "não sabe" que eles estão la dentro..
     
  5. naoliveira

    naoliveira Power Member

    Uma solução é fazer uma imagem de fundo a toda a largura da página, divídida em 3, no lado esquerdo metes a imagem do div#esq, no meio a do div#meio e no lado direito a do div#direito, aplicas essa imagem ao fundo do body e repetição y e já faz o que queres
     
  6. masterArt

    masterArt Power Member

    na main mete: display:table;
    funciona.
     
  7. skandal

    skandal Power Member

    Não querias dizer display: block?
     
  8. masterArt

    masterArt Power Member

    Nop, isso é diferente. ainda sei o que digo ;)
    Tive o mesmo bug e funcionou com o display:table;
     
  9. skandal

    skandal Power Member

    display:table é para tabelas, e quase que aposto que nas divs faz o mesmo :\ e block é mesmo o mais correcto.
     
  10. masterArt

    masterArt Power Member

    isso apenas faz com que se detecte as divs com float dentro da main.
     
  11. Apesar do display: table funcionar a melhor opção é colocar todas as DIVs como float, para serem automaticamente detectadas no interior da DIV main, quanto ao background, apos as DIVs estarem correctamente definidas ao definires a height das DIVs laterais como 100% já não vais ter problemas. sendo que esse valor passa a ser considerado pela #main e n pela página em si.

    Cumps.
     

Partilhar esta Página