Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Spyder.RV

[Resolvido] Ajustar site na altura do Browser

Por , em Desenvolvimento frontend

Recommended Posts

Spyder.RV    0

Spyder.RV
Postado

Tenho um site simples, cuja estrutura é dividida em 3 divs, TOPO, SITE e RODAPE.

 

TOPO e RODAPE têm altura definida, porém SITE é ajustável conforme o tamanho do conteúdo que é carregado (via ajax).

 

Quero que o site ocupe sempre toda a altura do browser, porém quando a div SITE possui pouco conteúdo, fica um espaço sem nada abaixo do RODAPE.

 

Usando min-height no CSS dessa div e até dá pro gasto, mas a coisa varia muito conforme a resolução e acaba que em um ou outro caso, ainda aparece o espaço...

 

E não posso simplesmente dar um height de 2000 px que vai ficar estranho...

 

Como faço para que a div SITE sempre se encaixe no espaço total disponível e o site seja mostrado ocupando (NO MÍNIMO) a altura total da area do browser?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

leia.

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spyder.RV    0

Spyder.RV
Postado

Fiz conforme tá ordenado lá mas não deu certo.

 

A div pai de todas (#estrutura) se encaixou na altura... porém o rodapé não foi empurrado pra baixo...

 

Aparentemente está tudo conforme orientado no artigo... Segue o código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">

<head>
<title>Nome do Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="layout/estrutura.css" rel="stylesheet" type="text/css" />
</head>

<body>

<!-- Estrutura do Site - INICIO -->
<div id="estrutura">

	<!-- Topo do Site - INICIO -->
	<div id="topo">

		<!-- Logo do Site - INICIO -->
		<div id="logo">
			<a href="home.php" class="link_logo"><img src="#" alt="Espaço para logomarca" /></a>
		</div>
		<!-- Logo do Site - FIM -->

		<!-- Banner superior - INICIO -->
		<div class="banner_superior">
			<p>Aqui vai um banner </p>
		</div>
		<!-- Banner superior - FIM -->

		<!-- Menu principal do Site - INICIO -->
		<div id="menu">
			<ul>
				<li><a href="home.php" class="link_menu">home</a></li>
				<li><a href="aempresa.php" class="link_menu">a empresa</a></li>
				<li><a href="missao.php" class="link_menu">missão</a></li>
				<li><a href="visao.php" class="link_menu">visão</a></li>
				<li><a href="valores.php" class="link_menu">valores</a></li>
				<li><a href="projetos.php" class="link_menu">projetos</a></li>
				<li><a href="contato.php" class="link_menu">contato</a></li>
			</ul>
		</div>
		<!-- Menu principal do Site - FIM -->

	</div>
	<!-- Topo do Site - FIM -->

	<!-- Conteúdo do Site - INICIO -->
	<div id="site">
		<p>Aqui vai o conteúdo do site</p>
  			<div class="clear"></div>
	</div>
	<!-- Conteúdo do Site - FIM -->

	<!-- Rodapé do Site - INICIO -->
	<div id="rodape">
		<p>Aqui vai o rodapé do site</p>
	</div>
	<!-- Rodapé do Site - FIM -->

</div>
<!-- Estrutura do Site - FIM -->

</body>

</html>

 

 

* {
  margin: 0;	
  padding: 0;	
  text-decoration: none; 
  list-style: none;	  	
}

html, body{
height: 100%;
}

body{
background: black;
color: white;
font: normal 14px Georgia, "Times New Roman", Times, serif; 
letter-spacing: 0.75px; 
}

#estrutura{
position: relative;
width: 966px;			
margin: 0 auto;		
border: 2px solid green;
min-height: 100%;
}

* html #estrutura {
height: 100%;	/* hack para IE6 que trata height como min-height */
}

#topo {
height: 150px;
}

#topo #logo {	
float: left;
width: 300px;
height: 120px;
text-align: center;
line-height: 120px;
}

#topo #logo a, #topo #logo a img{
display: block;
width: 300px;
height: 120px;
border: none;
color: white;
background: #333;
}

#topo .banner_superior{
float: left;
margin: 10px;
width: 640px;
height: 100px;
background: #333;
text-align: center;
line-height: 100px;
}

#topo #menu {
clear: both;
float: left;
}

#topo #menu ul {
float: left;
display: inline;
}

#topo #menu ul li {
float: left;
}

#menu ul li .link_menu {
display: block;
color: white;
background: #006;
width: 138px;
height: 30px;
line-height: 30px;   
text-align: center;
}

#menu ul li .link_menu:hover {
background: #006C00;
font-weight: bold;
text-transform: capitalize;
letter-spacing: 3px;
}

#menu ul li .link_menu:active {
width: 130px;
height: 25px;
padding-left: 8px;
padding-top: 5px;
line-height: 25px;
color: #030;
}


#site {
width: 946px;
margin: 10px;
}

#rodape {
position: absolute;
background: #333;
height: 60px;
text-align: center;
line-height: 60px;
border-top: 2px solid red;
width: 100%;
}

.clear {
clear:both;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vilson Gabriel    0

Vilson Gabriel
Postado

Tenta por no rodapé

 

#rodape {

position: absolute;

background: #333;

height: 60px;

text-align: center;

line-height: 60px;

border-top: 2px solid red;

width: 100%;

top: 100%;

margin-top: -31px;

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spyder.RV    0

Spyder.RV
Postado

Tenta por no rodapé

 

#rodape {

position: absolute;

background: #333;

height: 60px;

text-align: center;

line-height: 60px;

border-top: 2px solid red;

width: 100%;

top: 100%;

margin-top: -31px;

}

 

Amigo, não deu também... mas fiz como informei na resposta anterior pra Nitinha e deu certo.

 

Valeu pela força!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito