Ir para conteúdo

POWERED BY:

Arquivado

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

tamoura

Espaço abaixo do conteúdo!

Por , em Desenvolvimento frontend

Recommended Posts

tamoura    0

tamoura
Postado

Então, estou desenvolvendo um site só para estudo. O problema é que quando eu diminuo o zoom no próprio navegador, fica um espaço enooooorme abaixo do conteúdo:

Imagem para ilustrar meu fucking problema

A ideia é que o conteúdo ocupasse toda essa área, já tentei de tudo e não vai T-T
Agradeço desde já por perderem seu tempo ajudando uma noob xD

Html:

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title>Teste</title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/index.css">
		<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>

	<body>
		<div  class="geral">
			<header>
				<div class="middle">
					Conteúdo Cabeçalho
				</div>
			</header> <!-- fim cabeçalho -->

			<section class="middle box-content">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.</p>


			</section> <!-- fim conteúdo -->
			
			<footer>
				<div class="middle">
					Conteúdo Rodapé
				</div>
			</footer> <!-- fim rodapé -->
		</div> <!-- fim geral -->
	</body>
</html>

Css:

/** Confirugações Principais **/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html{
	height: 100%;
}
body{
	font-family: 'Montserrat', sans-serif;
	background-color:#f9e3c1;
	height: 100%;
}

/***/

/** Classes Principais **/
.geral{
	position: relative;
	min-height: 100%;
}

.middle{
	margin: 0 auto;
	background-color: #FFF;
	max-width: 660px;
	width: 100%;
}
/***/

/** Cabeçalho **/
header{
	width: 100%;
	height: 80px;
	background-color: red;
}
/***/

/** Conteúdo **/
.box-content{
	padding: 20px 20px 100px 20px;
	min-height: 550px;
	height: 100%;
	background-color: blue;
}
/***/

/** Rodapé**/
footer{
	width: 100%;
	height: 80px;
	background-color:red;
	position: absolute;
	bottom: 0;
}
/***/

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Bah, não consegui identificar esse problema.

Rodei seus códigos no Jsfiddle aqui e ficou normal, com o conteúdo azul colado no footer.

 

:\

Compartilhar este post

Link para o post
Compartilhar em outros sites

tamoura    0

tamoura
Postado

Bah, não consegui identificar esse problema.

Rodei seus códigos no Jsfiddle aqui e ficou normal, com o conteúdo azul colado no footer.

 

:\

 

eita, mesmo diminuindo o zoom do teu navegador?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Boa tarde, Tamoura.

 

Só faltou adicionar o "height: 100%" na div.geral, conforme exemplo abaixo:

 

CSS:

.geral{
    position: relative;
    min-height: 100%;
    height: 100%;
}

[]'s

Marco Bruno.

Compartilhar este post

Link para o post
Compartilhar em outros sites

tamoura    0

tamoura
Postado

Boa tarde, Tamoura.

 

Só faltou adicionar o "height: 100%" na div.geral, conforme exemplo abaixo:

 

CSS:

.geral{
    position: relative;
    min-height: 100%;
    height: 100%;
}

[]'s

Marco Bruno.

 

Fiz como tu mostrou e resolveu a parte do conteúdo. O problema é que agora meu rodapé não fica mais onde deveria estar ;-;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Mal, Tomoura.

 

Adicionar o no selector .geral a propriedade overflow com o valor hidden, conforme abaixo:

 

CSS

.geral {
    position: relative;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
}

[]'s

Marco Bruno.

Compartilhar este post

Link para o post
Compartilhar em outros sites

tamoura    0

tamoura
Postado

Mal, Tomoura.

 

Adicionar o no selector .geral a propriedade overflow com o valor hidden, conforme abaixo:

 

CSS

.geral {
    position: relative;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
}

[]'s

Marco Bruno.

 

Agora sim o/

Muito obrigada, Marco Bruno *O*

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