-1

Estou desenvolvendo uma aplicação web e coloquei um menu lateral com <aside> e tambem um footer na minha aplicação, mas o conteudo do footer não vai para baixo e sim fica no meio da tela da aplicação.

inserir a descrição da imagem aqui

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Menu do site do Maujor &#8212; Etapa 5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/css.css" type="text/css">
		<link rel="stylesheet" href="css/font-awesome.css" type="text/css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="bootstrap/bootstrap.css"> 
	<link rel="stylesheet" href="bootstrap/bootstrap.min.js"> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
        
        <style>
        /* 2a. Etapa */
@charset "UTF-8";
/* Folha de estilos:
Autor: Maurício Samy Silva
Versões
Data: 26/04/2014 - Redesign do site
*/
/* =CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@font-face {
    font-family: 'Fixation';
    src: url('css/Fixation.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
        
       
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
#busca{
	width: 90%;
}

.footer_titulo{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.conteudo_footer{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.fale{
	margin-top: 40px;
	margin-left:40px;
	font-family: 'Fixation';
	font-weight: 700;
}
.entre{
	margin-top: 40px;
	margin-left: 160px;
	font-family: 'Fixation';
	font-weight: 700;
}
.imagem_header{
	width: 35%;
	
	
}
.campo_busca{
	margin-top: 40px;
	margin-left: 160px;
	border: 1px radius solid;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Fim CSS Reset */
/* =GERAL */
*, html, body {
	margin:0;
	padding:0;
	}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
body {
	margin-left:55px;
	font:  62.5%/1.2 'Fixation';
	}

/* Fim 2a. Etapa */
/* 3a. Etapa */
#lateral {
	padding:0 50px 0 0;
	-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
				transition: all 0.5s ease;
	font-size:1.2em;
	background:rgb(44,62,80);
	background-image: -moz-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
			background-image: -webkit-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
					background-image: -o-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
							background-image: -ms-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
								background-image: linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
	height:100%;
	overflow:hidden;
	width:370px; 
	position:fixed;
	top:0;

	left:-320px;
	margin-top: 107px;
	font-family: 'Fixation';
	}

.teste{
	border-bottom: 1px solid black;
	width: 100%;
}
#lateral:before {
	z-index:1000;
	content: url(icone-menu.png);
	font-size:4em;
	color:white;
	position:fixed;
	left:4px;
	top:45px;
	}
#lateral:hover:before, #lateral:focus:before {
left:-500px
	}

.botao_menu_celular{
	display: none;
}
#lateral:hover, #lateral:focus,  #lateral:active  {
	overflow-y:scroll;
	-moz-transform: translate(320px, 0);
		-webkit-transform: translate(320px, 0);
			-o-transform: translate(320px, 0);
				transform: translate(320px, 0);
	padding-right:0;
	}	
/* Fim 3a. Etapa */
/* 4a. Etapa */
#lateral .box {
	list-style-type:none;
	margin-bottom:1em;;
	padding-bottom:1em;
	}
#lateral h3 {
	display:inline-block;
	font-weight:bold;
	font-size:1.6em;
	font-style:normal;
	padding-bottom:0.2em;
	margin: 2em 0 2em 0.81em;
	color:rgb(255,255,255);
	border-bottom: 4px solid rgb(155,155,155);
	}
#menu {
	font-style:italic;
	position:relative;
	font-size:1.0em;
	margin:1em 0 1em -1em;
	padding:0;
	}
#menu li  {margin:0;padding:0;}
#menu li a,  #menu li a:link {
	font-size:1.2em;
	color:rgb(255,255,255);
	text-decoration: none;
	padding: 0.8em 0 0.8em 1em;
	display: block;
	-moz-transition: all 1.2s ease;
			-webkit-transition: all 1.2s ease;
				-o-transition: all 1.2s ease;
					transition: all 1.2s ease;
	}
#menu li a:hover {
	color:rgb(255,255,255);
	background-color:rgba(255,255,255,0.2);
	-moz-transition: all 0.5s ease;
			-webkit-transition: all 0.5s ease;
				-o-transition: all 0.5s ease;
					transition: all 0.5s ease;
	}
/* Fim 4a. Etapa */
/* 5a. Etapa */

/* Fim 5a. Etapa */


@media  (max-width: 1500px) {
	.campo_busca{
		margin-left:120px;
		width: 80%;
	}
	.entre{
		margin-left: 120px;
	}
	
}
@media  (max-width: 1200px) {
	
	.campo_busca{
		margin-left:120px;
		width: 90%;
	}
	.entre{
		margin-left: 120px;
	}
	
}



@media  (max-width: 900px) {
	body {
		
		background-color: red;
	}
	.imagem_header{
		
		width: 60%;
	}
	.campo_busca{
		margin-left: 60px;
		width: 90%;
	}
	.entre{
		margin-left: 40px;
	}
	
	

/* Fim 5a. Etapa */

@media  (max-width: 650px) {
	.fale{
		display: none;
	}
	
	.imagem_header{
		
		width: 70%;
		margin-left: 100px;
		margin-top: -40px;
	}
	.campo_busca{
		display: none;
	}
	.entre{
		margin-left: 30px;
	
		
	}
	
	.botao_menu_celular{
		display: block;
	}
	
	
	.botao_menu_celular{
			background-color:white; 
		font-weight: 900;
		height: 20px;
			border: 1px solid white;
		margin-top:40px; 
	}
	
}
        </style>
</head>

<body>
	
	<header>
		<div class="container-fluid">
		<div class="row">
			<div class="col-xs-3 col-md-3">
<button type="button" class="botao_menu_celular">MENU</button><img src="imagens/bolos.JPG" class="imagem_header">
			</div>
			
			
			</div>
		</div>
	</header>
	<div class=teste></div>

	<aside>
<div id="lateral" onclick="return true" aria-haspopup="true">
<div id="menu">

<h3 class="link-titulo">Menu</h3>  			
    <ul class="box">					
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Receitas</a></li>
        <li ><a href="#">Fale Conosco</a></li>
      		
		<div class="col-sm-12">

                <h2 class="footer_titulo">NEWSLETTER</h2>
                <p class="conteudo_footer">Assine nossa mala direta e receba muitas ofertas por e-mail.</p>
                <input type="text" id="campo_busca2"><button type="submit" onclick="" class="buscar_produto3"><i class="fa fa-search" action="" ></i></button><br><br>
            </div>
		<img src="imagens/bolos.JPG" class="imagem_header">
    </ul>
   


</div> <!-- /#menu -->
</div> <!-- /#lateral -->
	</aside>
	
	<footer>
	Conteudo do footer que era pra ficar embaixo
	</footer>
	
</body>
</html>

link com minha aplicação

Ao descer a barra de rolagem o menu ficasse parado,quando chegasse em encontro com o footer.

inserir a descrição da imagem aqui

E não sobrepor o footer quando descer a barra de rolagem, e vier de encontro com o footer

inserir a descrição da imagem aqui

6
  • Amigo por favor coloque o código da sua página na pergunta. Só a imagem não ajuda muito para te darmos uma resposta precisa.
    – hugocsl
    Commented 23/01/2018 às 23:36
  • o codigo esta no link
    – User1999
    Commented 23/01/2018 às 23:37
  • Já tentou definir o CSS do footer como: position: absolute; bottom: 0; Commented 23/01/2018 às 23:41
  • ele ficou posicionado para baixo mas continuou embaixo do menu lateral
    – User1999
    Commented 23/01/2018 às 23:43
  • tentei diminuir a altura do menu lateral para que quando terminasse a altura do menu, vinhesse o footer mas não consegui fazer
    – User1999
    Commented 23/01/2018 às 23:44

2 Respostas 2

1

Olá, o que está acontecendo é que dentro da tag <aside> vc tem uma <div> com position: fixed(devido ao efeito que vc quer dar), e a confusão está ai, vou lhe explicar as formas de vc corrigir isso de acordo com suas necessidades.

CAUSA
Como dentro da tag <aside> tem uma div com fixed, isso faz com que a <div> com fixed, fique "fora do corpo do dom", causando um efeito de flutuamento, fazendo com que todo o conteúdo abaixo, suba, E como a tag <aside> está sem height definido, da essa "sensação" de que não está funcionando.

SOLUÇÕES
1 - Definir um height para a tag <aside> no exemplo eu coloquei 600px de altura, porém, pra isso funcionar vc tem que deixar de lado a métrica do height em % onde tem ofixed` aqui o exemplo para essa solução, mas essa solução só se encaixa se vc não precisar usar %.

2 - Usar position absolute, com bottom: xx (height do footer), por exemplo, se o footer tiver 30px, então bottom:30px aqui o exemplo para essa solução, ao meu ver é a solução que mais se encaixa para o seu layout.

3 - Aplicar position: fixed também a tag footer, nesse caso se comporta como a resposta acima, a unica diferença é que agora ela sempre estará presente na viewport, assim como <aside> está. aqui o exemplo para esse solução

Para todas as soluções, vc terá que alterar o tamanho da div com fixed, o id #lateral, pois com 100% no height ela vai ficar por cima do footer, mas se essa for a proposta, não precisará mexer.

Existem outras opções de correção para esse problema, vai desde alterar o html e trocar a forma como faz o transitions, até correções mais cirúrgicas com js para casos mais específicos.

Espero ter lhe dado uma visão do que ocorreu no seu layout, sabendo disso vc pode buscar por outras soluções com mais calma.

Abraços.

11
  • agora ocorre outro problema ão consigo dar um margin-bottom na tag #lateral, gostaria de que houvesse um espaço entre o menu e o footer mas não estou conseguindo
    – User1999
    Commented 24/01/2018 às 13:30
  • O margin-bottom nesse caso, não vai funcionar, pq seu menu lateral está flutuando com fixed, para haver esse espaço, vc tem que pensar da seguinte forma, se o topo tem 10% de height, o aside 80% o footer não pode passsar de 10%, totalizando 100% da pagina, para dar esse respiro, vc tem que diminuir o height do aside, pra por exemplo, 70% criando assim, 10% de espaço entre aside e footer Commented 24/01/2018 às 13:51
  • funcionou Leandro carra segui suas sugestões e o footer ficou embaixo , , só que eu queria aumentar o tamanho do footer sem interferir no tamanho do menu é possivel ? Algo mais ou menos assim lacoste.com/br
    – User1999
    Commented 24/01/2018 às 20:39
  • Sem problemas, aqui eu fiz pra vc ver como funciona, usei a 3 resolução, e no #lateral adicionei z-index: 1 e no footer z-index: 0 Aqui a primeira versao veja como ficou jsfiddle.net/v718rxtg/21 Pra segunda versao tentei fazer igual ao que vc passou como exemplo, mas tive adicionar uma div dentro da div teste. jsfiddle.net/v718rxtg/24 Acho que isso lhe ajudara. Commented 24/01/2018 às 23:10
  • Agora Leandro carra o problema é outro quando eu coloco um conteúdo no meio da tela, esse conteúdo passa por trás do footer, e quando eu baixo o scrollview o menu na lateral também passa por trás do footer .Queria que quando eu colocasse o conteúdo no meio da tela o footer fosse automaticamente para baixo e quando baixar o scrollview o menu parasse quando chegasse o footer jsfiddle.net/v718rxtg/26
    – User1999
    Commented 25/01/2018 às 1:39
0

A tag <footer> não garante que o elemento ficará sempre na parte de baixo da janela. Como qualquer outro elemento, ele irá se ajustar à ordem dos elementos, de cima pra baixo.

Quando a página tem conteúdo, o footer automaticamente ficará abaixo, não porque ele tem essa tag, mas porque o conteúdo da página irá empurra-lo para baixo. Como o próprio nome diz, footer significa rodapé, que fica abaixo do conteúdo.

Mas se você quiser que o footer fique sempre lá na borda inferior da janela, é preciso fixá-lo. Neste caso, caso a página tenha conteúdo suficiente para criar rolagem (scroll) e ao ser rolada, o footer não se moverá.

Para isso basta incluir um CSS:

footer{
   bottom: 0;
   position: fixed;
}

Veja exemplo baseado no seu código:

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


<title>Menu do site do Maujor &#8212; Etapa 5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/css.css" type="text/css">
        
        <style>
        /* 2a. Etapa */
@charset "UTF-8";
/* Folha de estilos:
Autor: Maurício Samy Silva
Versões
Data: 26/04/2014 - Redesign do site
*/
/* =CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@font-face {
    font-family: 'Fixation';
    src: url('css/Fixation.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
        
       
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
#busca{
	width: 90%;
}

.footer_titulo{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.conteudo_footer{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.fale{
	margin-top: 40px;
	margin-left:40px;
	font-family: 'Fixation';
	font-weight: 700;
}
.entre{
	margin-top: 40px;
	margin-left: 160px;
	font-family: 'Fixation';
	font-weight: 700;
}
.imagem_header{
	width: 35%;
	
	
}
.campo_busca{
	margin-top: 40px;
	margin-left: 160px;
	border: 1px radius solid;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Fim CSS Reset */
/* =GERAL */
*, html, body {
	margin:0;
	padding:0;
	}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
body {
	margin-left:55px;
	font:  62.5%/1.2 'Fixation';
	}

/* Fim 2a. Etapa */
/* 3a. Etapa */
#lateral {
	padding:0 50px 0 0;
	-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
				transition: all 0.5s ease;
	font-size:1.2em;
	background:rgb(44,62,80);
	background-image: -moz-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
			background-image: -webkit-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
					background-image: -o-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
							background-image: -ms-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
								background-image: linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
	height:100%;
	overflow:hidden;
	width:370px; 
	position:fixed;
	top:0;

	left:-320px;
	margin-top: 107px;
	font-family: 'Fixation';
	}

.teste{
	border-bottom: 1px solid black;
	width: 100%;
}
#lateral:before {
	z-index:1000;
	content: url(icone-menu.png);
	font-size:4em;
	color:white;
	position:fixed;
	left:4px;
	top:45px;
	}
#lateral:hover:before, #lateral:focus:before {
left:-500px
	}

.botao_menu_celular{
	display: none;
}
#lateral:hover, #lateral:focus,  #lateral:active  {
	overflow-y:scroll;
	-moz-transform: translate(320px, 0);
		-webkit-transform: translate(320px, 0);
			-o-transform: translate(320px, 0);
				transform: translate(320px, 0);
	padding-right:0;
	}	
/* Fim 3a. Etapa */
/* 4a. Etapa */
#lateral .box {
	list-style-type:none;
	margin-bottom:1em;;
	padding-bottom:1em;
	}
#lateral h3 {
	display:inline-block;
	font-weight:bold;
	font-size:1.6em;
	font-style:normal;
	padding-bottom:0.2em;
	margin: 2em 0 2em 0.81em;
	color:rgb(255,255,255);
	border-bottom: 4px solid rgb(155,155,155);
	}
#menu {
	font-style:italic;
	position:relative;
	font-size:1.0em;
	margin:1em 0 1em -1em;
	padding:0;
	}
#menu li  {margin:0;padding:0;}
#menu li a,  #menu li a:link {
	font-size:1.2em;
	color:rgb(255,255,255);
	text-decoration: none;
	padding: 0.8em 0 0.8em 1em;
	display: block;
	-moz-transition: all 1.2s ease;
			-webkit-transition: all 1.2s ease;
				-o-transition: all 1.2s ease;
					transition: all 1.2s ease;
	}
#menu li a:hover {
	color:rgb(255,255,255);
	background-color:rgba(255,255,255,0.2);
	-moz-transition: all 0.5s ease;
			-webkit-transition: all 0.5s ease;
				-o-transition: all 0.5s ease;
					transition: all 0.5s ease;
	}
/* Fim 4a. Etapa */
/* 5a. Etapa */

/* Fim 5a. Etapa */


@media  (max-width: 1500px) {
	.campo_busca{
		margin-left:120px;
		width: 80%;
	}
	.entre{
		margin-left: 120px;
	}
	
}
@media  (max-width: 1200px) {
	
	.campo_busca{
		margin-left:120px;
		width: 90%;
	}
	.entre{
		margin-left: 120px;
	}
	
}



@media  (max-width: 900px) {
	body {
		
		background-color: red;
	}
	.imagem_header{
		
		width: 60%;
	}
	.campo_busca{
		margin-left: 60px;
		width: 90%;
	}
	.entre{
		margin-left: 40px;
	}
	
	

/* Fim 5a. Etapa */

@media  (max-width: 650px) {
	.fale{
		display: none;
	}
	
	.imagem_header{
		
		width: 70%;
		margin-left: 100px;
		margin-top: -40px;
	}
	.campo_busca{
		display: none;
	}
	.entre{
		margin-left: 30px;
	
		
	}
	
	.botao_menu_celular{
		display: block;
	}
	
	
	.botao_menu_celular{
			background-color:white; 
		font-weight: 900;
		height: 20px;
			border: 1px solid white;
		margin-top:40px; 
	}
	
}

footer{
   bottom: 0;
   position: fixed;
}
</style>
</head>

<body>

<header>
   <div class="container-fluid">
      <div class="row">
         <div class="col-xs-3 col-md-3">
            <button type="button" class="botao_menu_celular">MENU</button><img src="imagens/bolos.JPG" class="imagem_header">
         </div>
      </div>
   </div>
</header>
<div class=teste>
Role para baixo
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<aside>
   <div id="lateral" onclick="return true" aria-haspopup="true">
      <div id="menu">
         <h3 class="link-titulo">Menu</h3>  			
         <ul class="box">					
            <li><a href="#">Produtos</a></li>
            <li><a href="#">Receitas</a></li>
            <li ><a href="#">Fale Conosco</a></li>
            <div class="col-sm-12">
               <h2 class="footer_titulo">NEWSLETTER</h2>
                  <p class="conteudo_footer">Assine nossa mala direta e receba muitas ofertas por e-mail.</p>
                  <input type="text" id="campo_busca2"><button type="submit" onclick="" class="buscar_produto3"><i class="fa fa-search" action="" ></i></button><br><br>
            </div>
            <img src="imagens/bolos.JPG" class="imagem_header">
         </ul>
      </div> <!-- /#menu -->
   </div> <!-- /#lateral -->
</aside>
<footer>
   Conteudo do footer que era pra ficar embaixo
</footer>

</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .