Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Karek@

Altura de uma div

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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;
}

Edited by Karek@

Share this post


Link to post
Share on other sites
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%.

Share this post


Link to post
Share on other sites
clera

boas,

é exatamente isso mas com um listener para o resize do browser ;)

window.onresize = function(event) {
   ...
}

Share this post


Link to post
Share on other sites
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%.

Share this post


Link to post
Share on other sites
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%.

Share this post


Link to post
Share on other sites
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.

Edited by Karek@

Share this post


Link to post
Share on other sites
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.

Edited by 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%.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Edited by yoda

Share this post


Link to post
Share on other sites
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)

Share this post


Link to post
Share on other sites
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%.

Share this post


Link to post
Share on other sites
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%.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.