Ir para o conteúdo
Karek@

Altura de uma div

Mensagens Recomendadas

Karek@    0
Karek@

Bom dia, eu tenho o seguinte layout de uma página:

<div id="maincontainer">

<div id="header">
 <h1>Header</h1>
</div>

<div id="contentwrapper">
 <h1>Content Fluid</h1>
</div>

<div id="footer">
 <h1>Footer</h1>
</div>

</div>

 body{
  margin:0;
  padding:0;
 }

 #header {
  background: #EAEAEA;
  height: 130px; /*Height of top section*/
 }

 #contentwrapper{
  float: left;
  width: 100%;
 }


 #footer{
  clear: both;
  width: 100%;
  background: black;
  color: #FFF;
  height: 130px;
 }

A minha dúvida é como é que meto a div contentwrapper a ocupar o resto do ecrã..

Se alguém me poder ajudar agradeço.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Karek@    0
Karek@

Já consegui resolver o meu problema com js.

function tamanhoDiv() {
var altura = window.document.body.clientHeight;

var tamanho = altura - 260;

var divConteudo = document.getElementById('contentwrapper');

divConteudo.style.height = tamanho;
}

Editado por Karek@

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    67
brunoais

Então e se o utilizador alterar a altura do browser?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    67
brunoais

E se o utilizador tiver o js desligado?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    67
brunoais

ou se não tiver sequer um browser...

Se não tiver um browser qual o problema?

Só com um browser é que se pode ver páginas na internet.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Karek@    0
Karek@

Então e se o utilizador alterar a altura do browser?

Quando chamo a função js utilizo o evento onresize como disse o clera.

Se o utilizador tiver o js desactivado não sei como resolver o problema, se souberes e poderes partilhar agradeço ;)

Cumprimentos.

Editado por Karek@

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    67
brunoais

Logo para começar, tirava o float. Não há razão para ele estar lá.

Agora, eu não sei exatamente como é que pensas usar esse layout (refiro-me ao conteudo dentro desses div), por isso, vou supor que é coisa bem feita.

Depois pões o <html> e o <body> a usar 100% da altura:

   html, body{
       margin:0;
       padding:0;
       border:0;
       min-height:100%;
   }

Preparas o container:

   #maincontainer{
       display:table;
       width: 100%;
   }
   #maincontainer > *{
       display:table-row;
   }
   #maincontainer > * > *{
       display:table-cell;
   }

Agora pões o resto:

   #header {
       background: #EAEAEA;
       height: 130px; /*Height of top section*/
   }

   #footer{
       height: 130px;
       background: black;
       color: #FFF;
   }

E no HTML:

<div id="maincontainer">
   <div id="header">
     <div>
       <h1>Header</h1>
     </div>
   </div>

   <div id="contentwrapper">
     <div>
       <h1>Content Fluid</h1>
     </div>
   </div>

   <div id="footer">
     <div>
       <h1>Footer</h1>
     </div>
   </div>
</div>

Nada disto foi testado, mas parece-me estar bem.

Há coisas que tabelas fazem melhor que sem ser com tabelas. Esta é uma delas, na minha opinião.

Editado por brunoais

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Karek@    0
Karek@

Bom dia, não sei se estou a fazer alguma coisa mal mas o "contentwrapper" não ocupa o resto da página que está em branco.

Cumprimentos.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
yoda    138
yoda

http://jsfiddle.net/8u3Gn/1/

Começas por calcular a altura somada dos elementos que estão acima e abaixo do elemento que queres que ocupe o espaço restante, e aplicas este CSS ao contentwrapper :

    /* assumindo que o cálculo deu 100px */

   height: -moz-calc(100% - 100px);
   height: -webkit-calc(100% - 100px);
   height: calc(100% - 100px);

Caso não funcione, assegura-te que o body pelo menos tem 100% de altura e largura.

Editado por yoda

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Karek@    0
Karek@

Bom dia, fiz uma pequena alterar no css que o brunoais disponibilizou e já funciona (Chrome, Mozilla...). No entanto não funciona no IE8 e eu presisava que funciona-se pelo menos no ie8.

html, body{
   margin:0;
   padding:0;
   border:0;
   width: 100%;
   min-width: 1024px;
   height:100%;
   min-height:100%;
}
#maincontainer{
   display:table;
   height: 100%;
   width: 100%;
}
#maincontainer > *{
   display:table-row;
}
#maincontainer > * > *{
   display:table-cell;
}
#header {
   background: #EAEAEA;
   height: 130px;
}
#contentwrapper {
background-color: red;
   height: 100%;
   width: 100%;
}
#footer{
   height: 130px;
   background: black;
   color: #FFF;
}

http://jsfiddle.net/8u3Gn/1/

Começas por calcular a altura somada dos elementos que estão acima e abaixo do elemento que queres que ocupe o espaço restante, e aplicas este CSS ao contentwrapper :

	/* assumindo que o cálculo deu 100px */

height: -moz-calc(100% - 100px);
height: -webkit-calc(100% - 100px);
height: calc(100% - 100px);

Caso não funcione, assegura-te que o body pelo menos tem 100% de altura e largura.

Também tentei assim, mas não funcionou. (Tinha o body com 100% de altura e largura)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    67
brunoais

Começas por calcular a altura somada dos elementos que estão acima e abaixo do elemento que queres que ocupe o espaço restante, e aplicas este CSS ao contentwrapper :

    /* assumindo que o cálculo deu 100px */

   height: -moz-calc(100% - 100px);
   height: -webkit-calc(100% - 100px);
   height: calc(100% - 100px);

Caso não funcione, assegura-te que o body pelo menos tem 100% de altura e largura.

Aprendi mais algo hoje :).


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    67
brunoais

Calc não funciona em IE8:

O IE8 está estragado e vai continuar estragado. Já está mais de 10 anos atrasado e esse número vai continuar a aumentar à medida que vão alimentando o atraso.

Perdi uma tarde por causa desta idiotice...e acabei por voltar a js :\

O problema é teu. Fica sabendo que se não fossem as ideias, nem o computador que tens existia. Se estás contra ideias, é melhor atualizares-te.

Depois não digas que não avisei.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
malleus    0
malleus

Referi a questão do suporte em IE8 porque o OP disse que precisava que funcionasse no IE8.

De resto estava simplesmente a dar o heads-up para um particulariedade bastante chata para pessoas que, como eu, não usam espaços em branco em recursos client-side (css nomeadamente).

Escusas é de te exaltar, se o meu contributo, que era tudo menos do "bota abaixo" como se pode depreender dos dois parágrafos anteriores, não for bem vindo eu sei onde é a porta.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.