[Resolvido] Elemento HTML com height auto-ajustável

RodrigoSamuel · Outubro 16, 2012

Olá pessoal do Fórum, tudo bom?

Eu estou bolando o layout de uma página composta de apenas três divs: cabeçalho, conteúdo e rodapé, conforme o diagrama a seguir:

O que eu quero: que a div de rodapé fique sempre na parte inferior do viewport e que a div do conteúdo ocupe todo o espaço que sobrar da altura do viewport, inclusive quando a janela for redimensionada.

Acontece que eu não consegui fazer isso utilizando apenas CSS.

Este layout será para um web app, daí a necessidade de fazer com que as div's ocupem todo o conteudo do viewport e que a div de rodapé permaneça sempre na parte inferior.

Eu só consegui resolver isso utilizando JavaScript, mas eu queria me certificar primeiro se não existe alguma solução elegante em CSS para resolver este problema.

Alguém sabe alguma solução pra isso em CSS?

Pra facilitar estou postando um exemplo dos códigos HTML e CSS.

HTML

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo2.css">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

<script type="text/javascript">
	function setMapHeight() {
		document.getElementById("content").style.height =
		document.documentElement.clientHeight -
		(document.getElementById("header").clientHeight +
		document.getElementById("footer").clientHeight) + "px";
	}
</script>

<title></title>

</head>

<body onLoad="setMapHeight()" onResize="setMapHeight()">

<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>

</body>

</html>

CSS

body {
margin: auto;
overflow: hidden;
}

#header {
height: 80px;
background-color: green;
}

#content {
background-color: gray;
}

#footer {
height: 60px;
background-color: black;
}

ricardo_mc · Outubro 16, 2012

Olha, só conheço uma forma de fazer isso puramente pelo CSS, mas é preciso que a estrutura base esteja em Table, porque as TD acompanham o tamanho uma da outra. Tendo essa estrutura, o miolo você pode voltar a fazer em tabless.

Segue o código:

HTML

<table>
 <tr>
   <td height="80px">TOPO</td>
 </tr>
 <tr>
   <td>CORPO</td>
 </tr>
 <tr>
   <td height="80px">RODAPE</td>
 </tr>
</table>

CSS

* {
margin: 0;
padding: 0;
border-collapse: collapse;
}
table {
width: 100%;
height: 100%;
position: absolute;
}
table tr td {
border: 1px solid #000;
}

Vê se isso resolve seu problema.

RodrigoSamuel · Outubro 17, 2012

Olha, só conheço uma forma de fazer isso puramente pelo CSS, mas é preciso que a estrutura base esteja em Table, porque as TD acompanham o tamanho uma da outra. Tendo essa estrutura, o miolo você pode voltar a fazer em tabless.

Vê se isso resolve seu problema.

Realmente é uma boa solução. Eu nunca pensaria em utilizar tables!!!

Valeu! :thumbsup:

brunobispo · Outubro 17, 2012

1. Encapsule o cabeçalho e conteúdo principal em um bloco com classe wrapper:

<div class="wrapper">
   <div id="header">header</div>
   <div id="content">content</div>
</div>

2. Adicione um bloco com classe push imediatamente após o conteúdo (e dentro do envólucro):

<div class="wrapper">
   <div id="header">header</div>
   <div id="content">content</div>
   <div id="push"></div>
</div>

3. Adicione a classe footer ao rodapé:

<div id="footer" class="footer">footer</div>

4. Adicione as seguintes regras ao seu CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /* a margem inferior é o valor negativo da altura do rodapé */
}
.footer, .push {
height: 20px; /* .push precisa ter o mesmo tamanho do rodapé .footer */
}

Para mais detalhes, consulte a fonte (em inglês): http://ryanfait.com/

ricardo_mc · Outubro 17, 2012

1. Encapsule o cabeçalho e conteúdo principal em um bloco com classe wrapper:
<div class="wrapper">
   <div id="header">header</div>
   <div id="content">content</div>
</div>
2. Adicione um bloco com classe push imediatamente após o conteúdo (e dentro do envólucro):
<div class="wrapper">
   <div id="header">header</div>
   <div id="content">content</div>
   <div id="push"></div>
</div>
3. Adicione a classe footer ao rodapé:
<div id="footer" class="footer">footer</div>
4. Adicione as seguintes regras ao seu CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /* a margem inferior é o valor negativo da altura do rodapé */
}
.footer, .push {
height: 20px; /* .push precisa ter o mesmo tamanho do rodapé .footer */
}
Para mais detalhes, consulte a fonte (em inglês): http://ryanfait.com/

Olha, essa foi ninja, realmente não sabia desse macete. Uma pena que o content não se expanda sozinho (sem conteúdo) até o final, daí fica difícil de usar um background nele, mas nada que realmente seja um incomodo.

Muito boa a dica!!!

RodrigoSamuel · Outubro 17, 2012

1. Encapsule o cabeçalho e conteúdo principal em um bloco com classe wrapper:

2. Adicione um bloco com classe push imediatamente após o conteúdo (e dentro do envólucro):

3. Adicione a classe footer ao rodapé:

4. Adicione as seguintes regras ao seu CSS:

Para mais detalhes, consulte a fonte (em inglês): http://ryanfait.com/

Olá Bruno!

Agradeço sua atenção mas aqui não funcionou a solução que você sugeriu. :unsure:

E a solução que o Ricardo passou havia funcionado perfeitamente no Safari, mas quando testei nos outros navegadores não funcionou em nenhum! :upset:

O fato é que terei que voltar, pelo menos por hora, para a solução com JavaScript que eu havia feito no início. Depois que eu terminar a lógica do app eu dou mais uma pesquisada neste assunto.

Só a título de esclarecimento, pois pode ser por isso que estou tento problemas por aqui, a div #content abrigará uma instância de mapa do Google Maps. E o mapa não "preenche" a div, nós é que temos que definir as dimensões dela. Acho que é aí que está o meu problema, já que neste caso eu não quero definir um height fixo.

Mas valeu pela ajuda galera! E se descobrirem algo, por favor, não deixem de compartilhar aqui. :grin:

brunobispo · Outubro 17, 2012

Olha, essa foi ninja, realmente não sabia desse macete. Uma pena que o content não se expanda sozinho (sem conteúdo) até o final, daí fica difícil de usar um background nele, mas nada que realmente seja um incomodo.

Muito boa a dica!!!

Boa observação. A solução fica meia boca, mas pode ajudar. ;)

Willian Makoto · Outubro 17, 2012

eeae ;D

Bom uma solução que eu uso sempre é puro CSS, olhe:



body {
       margin: auto;
       overflow: hidden;
}

#header {
       height: 80px;
       background-color: green;
}

#content {
       background-color: gray;
       min-height:100%;
       overflow:hidden;
}

#footer {
       height: 60px;
       background-color: black;
       position:relative;
       clear:both;
}

Faz o teste aí, creio que seja a solução mais fácil (:

*eu não aconselho utilizar tabelas.....

Abç!

não se esqueça do [+1] kkk'

ricardo_mc · Outubro 17, 2012

Olá Bruno!

Agradeço sua atenção mas aqui não funcionou a solução que você sugeriu. :unsure:

E a solução que o Ricardo passou havia funcionado perfeitamente no Safari, mas quando testei nos outros navegadores não funcionou em nenhum! :upset:

O fato é que terei que voltar, pelo menos por hora, para a solução com JavaScript que eu havia feito no início. Depois que eu terminar a lógica do app eu dou mais uma pesquisada neste assunto.

Só a título de esclarecimento, pois pode ser por isso que estou tento problemas por aqui, a div #content abrigará uma instância de mapa do Google Maps. E o mapa não "preenche" a div, nós é que temos que definir as dimensões dela. Acho que é aí que está o meu problema, já que neste caso eu não quero definir um height fixo.

Mas valeu pela ajuda galera! E se descobrirem algo, por favor, não deixem de compartilhar aqui. :grin:

Olha Rodrigo, eu testei o modelo com a tabela em todos os navegadores e funcionou perfeitamente (Chrome, Safari, Opera, FF, IE 8 e IE 9). Os únicos que não funcionam muito bem são os IE 6 e IE 7, que precisa trocar de position:absolute para position:fixed (e mesmo assim fica um pouco bugado).

Dá uma olhada: http://unlock.com.br/teste/table/

Henrique Barcelos · Outubro 17, 2012

Se estamos no fórum de Webstandards, devemos procurar soluções conforme as mesmas...

NÃO UTILIZE TABELAS PARA FINS PARA OS QUAIS ELAS NÃO FORAM CRIADAS.

Tabela se utiliza para dados tabulares, não para estruturação de layout. Fazer isso é voltar 20 anos no tempo...

Faça desta forma que funciona:

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

RodrigoSamuel · Outubro 17, 2012

eeae ;D

Bom uma solução que eu uso sempre é puro CSS, olhe:

Faz o teste aí, creio que seja a solução mais fácil (:

*eu não aconselho utilizar tabelas.....

Abç!

não se esqueça do [+1] kkk'

Olha Rodrigo, eu testei o modelo com a tabela em todos os navegadores e funcionou perfeitamente (Chrome, Safari, Opera, FF, IE 8 e IE 9). Os únicos que não funcionam muito bem são os IE 6 e IE 7, que precisa trocar de position:absolute para position:fixed (e mesmo assim fica um pouco bugado).

Dá uma olhada: http://unlock.com.br/teste/table/

Se estamos no fórum de Webstandards, devemos procurar soluções conforme as mesmas...

NÃO UTILIZE TABELAS PARA FINS PARA OS QUAIS ELAS NÃO FORAM CRIADAS.

Tabela se utiliza para dados tabulares, não para estruturação de layout. Fazer isso é voltar 20 anos no tempo...

Faça desta forma que funciona:

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

Então pessoal, todas estas soluções funcionam em condições digamos "normais".

Acontece que no meu caso não é uma condição "normal", hehe.

Essa div #content não terá conteúdo nenhum na verdade, ela servirá apenas para abrigar uma instância do Google Maps.

O problema ocorre porque os scripts do Google Maps precisam que a div que abrigará o mapa tenha dimensões definidas (width e height), já que será nestas dimensões (área) que ficará o mapa.

Como a div #content não tem height definido em nenhuma destas soluções, os scripts instanciam o mapa com 0px de altura e por isso ele não aparece no viewport.

Se vocês tiverem tempo pra testar e ver na prática o problema, o script para gerar o mapa é este: (lembre de colocar o id="map" na div do meio)

<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script>
<script type="text/javascript">

var map;
function initialize() {
	var mapOptions = {
		zoom: 17,
		center: new google.maps.LatLng(-18.0, -48.0),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Obrigado mais uma vez a todos pela atenção e ajuda!

PS.: quando eu criei o tópico eu ainda não sabia que os scripts do Google Maps se comportavam desta maneira (precisavam de um height definido para a div). Eu só descobri que este era o problema depois. Agora eu já penso que não há uma solução em CSS puro, o melhor mesmo é utilizar JavaScript.

RodrigoSamuel · Outubro 17, 2012

Pessoal, consegui. Uhul!

A culpa era toda minha mesmo :ermm: .

Na implementação da sugestão do Bruno eu não coloquei height: 100% no html, só no body. Aí não tinha como funcionar mesmo.

A solução, em puro CSS :grin: ficou assim: (no meu caso eu preferi o rodapé com position: fixed, mas funciona com o position: relative.

<html>
<head>
<meta charset="UTF-8">
<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script>
<script type="text/javascript">	
	var map;
	function initialize() {
		var mapOptions = {
			zoom: 17,
			center: new google.maps.LatLng(-18.91580, -48.27411),
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById('map'), mapOptions);
	}
	google.maps.event.addDomListener(window, 'load', initialize);
</script>

<title>Título</title>

<style type="text/css">
	body, html {
		height: 100%;
	}
	body {
		margin: 0 auto;
		overflow: hidden;
	}
	#header {
		height: 75px;
		background-color: blue;
	}
	#map {
		height: 100%;
	}
	#footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 45px;
		background-color: green;
	}
</style>

</head>

<body>

<div id="header">HEADER</div>
<div id="map"></div>
<div id="footer">FOOTER</div>

</body>
</html>

Testado no IE 9, Firefox 16 e Chrome 22. Funcionou em todos.

Obrigado mais uma vez a todos.

Como faz para marcar este tópico como "Resolvido"?

Arquivado

[Resolvido] Elemento HTML com height auto-ajustável

Recommended Posts

RodrigoSamuel 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo_mc 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

RodrigoSamuel 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo_mc 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

RodrigoSamuel 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Makoto 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo_mc 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

RodrigoSamuel 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

RodrigoSamuel 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Fóruns

Tempo Real

Informação importante