Ir para conteúdo

POWERED BY:

Arquivado

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

Victor Maximo

Div não respeita limite do rodapé

Por , em Desenvolvimento frontend

Recommended Posts

Victor Maximo    0

Victor Maximo
Postado

Bom, sou um pouco novo na área e estou fazendo uma estrutura para um site mas estou com um problema a parte do painel tem height:100% e ele para certinho no rodapé, ai então criei uma div dentro do painel que vai ser o menu, e determinei a ele height:100%

igual no painel, porém ele não respeita o rodapé e continua descendo na pagina toda. alguém poderia me ajudar?
Imagem do ocorrido: 2z8alxt.png
HTML
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Meu Casamento</title>
  <link rel="stylesheet" href="css/style.css" media="screen"/>
 
	</head>

<body>

<div id="tudo">

<div id="painel"> 
<div id="topo">
    <div id="logo"><img src="images/logo.jpg"></div>
  
    </div> <!-- fim div topo -->

  <div id="menu" ><p>Menu<br>
  ___________</p></div>

  </div> <!-- fim div painel-->

 <div id="rodape">Criado por V-Design</div>
  

</div> 
<!-- fim div tudo -->

</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */

@charset "utf-8";
/* CSS Document */


*{
	padding:0;
	margin:0;
}

html, body {height:100%;}

body {

	background-color:  #90EE90  ;
	
}


#tudo {
height:100%;	
position:relative;
}


#menu {
position:relative;
background-color:black;
width:250px;
height:100%;
color:white;


}
#painel {
   position:relative;
   width:1000px;
   height:100%;
   background-color:white;
   left:50%;
   ;
   margin-top:70px;
 

   
    
   
}

#topo { 
height:260px;
background-color:gray;
}

#logo{
 position:absolute;
 margin-top:20px;
 ;
 left:50%;

}




#menu p {
font-size:25px;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
text-align:center;

}

#rodape {
position:absolute;
background-color:gray;
width:1000px;
left:50%;
;
text-align:center;
bottom: 0;
height:22px;
 

   
}

Se alguém puder ajudar, agradecido.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Electronic    124

Electronic
Postado

O bom é não usar tamanhos fixos, a não ser que sua pagina seja estática

 

vc deu ao ser menu altura de 100% - ele tem a altura da pagina

mas ele não começa no inicio da pagina, antes dele tem o #topo que empurra ele pra baixo

a altura dele teria de ser

altura da pagina menos a altura do #topo

faça isso com javascript

e experimente esse css

*{
	padding:0;
	margin:0;
}

html, body {height:100%;}

body {

	background-color: #90EE90 ;
}


#tudo {
	height:100%;	
	position:relative;
}

#painel {
	position:relative;
	width:1000px;
	height:100%;
	background-color:white;
	margin-top:70px;
	margin: 0 auto;
}

#topo {
	height:260px;
	background-color:gray;
}

#logo{
	position:absolute;
	margin-top:20px;
	left:50%;
}


#menu {
	position:relative;
	background-color:black;
	width:250px;
	color:white;
}

#menu p {
	font-size:25px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	text-align:center;

}

#rodape {
	background-color:gray;
	width:1000px;
	text-align:center;
	bottom: 0;
	height:22px;
	margin: 0 auto;
}

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