Ir para conteúdo

POWERED BY:

Arquivado

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

pedrohsb

DIVs que ocupam toda a página

Por , em Desenvolvimento frontend

Recommended Posts

pedrohsb    6

pedrohsb
Postado

Estou criando um site tableless e me deparo com a seguinte situação:

 

Como criar uma div que ocupa toda a página?

 

Vamos supor se você escreveu muito pouco, vai ficar aquele espação em branco. Quero que a div cubra esse espaço quando for preciso.

 

O código está abaixo para vocês verem:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Middlevalley | Servidor de Minecraft</title> 
<link href="http://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet" type="text/css">
<style>
#body {margin: 0; padding: 0; background: #FFE7BA;}

#container {margin: 1em auto; width: 980px; background: #fff; box-shadow: 4px 5px 5px #8B795E;
/*min-height: 733px; height: auto !important;*/}

#header {background: url(top.jpg) no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  padding: 12px;}
 #header.title {font-family: Berkshire Swash; font-size: 45px; font-weight: bold; color: #FFFFFF; text-shadow: #666 1px 1px 2px;}

#mainnav {background: #EE7600; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px;}
 #mainnav.pages {font-family: Open Sans; font-size: 13px; font-weight: bold; color: #FFFFFF;}

#search {float: right; width: 184px; position: relative; top: -4px; left: 9px;}
#menu {float: right; width: 300px; margin: 10px; padding-left: 7px; border-left: 1px dashed; border-left-color: #ccc}
#contents {float: left; width: 632px; margin-top: 12px; margin-left: 12px; margin-right: 8px}
#footer {clear: both; padding-top: 15px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px;}
a.no:link, visited {text-decoration: none; color: inherit}
a.no:hover {text-decoration: underline; color: #EE8237;}
a.ys:link, visited, hover {text-decoration: none; color: inherit}
span.spc {margin: 0 10px;}
span.spc:first-of-type {margin-left: 0;}
span.spc:last-of-type {margin-right: 0;}
div.idmenu {padding-bottom: 30px}
div.titmn {font-family: Open Sans; font-size: 15px; color: #EE7600; border-bottom: 1px solid; border-bottom-color: #EE7600}
div.desmn {font-family: Open Sans; font-size: 13px; color: #4F4F4F; margin-top: -9px}
div.pgtitle {font-family: Open Sans; font-size: 19px; color: #EE7600;}
div.pgdes {font-family: Open Sans; font-size: 14px; color: #4F4F4F; margin-top: -9px; text-align: justify;}
div.copy {font-family: Open Sans; font-size: 11px; color: #9F9F9F; text-align: center}
hr.spccpy {border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
</style>
</head>

<body id="body">
<div id="container">
  <div id="header" class="title">
      <div>Middlevalley</div>
  </div>

  <div id="mainnav" class="pages">
      <span class="spc">INÍCIO</span>
      <span class="spc">EQUIPE</span>
      <span class="spc">COMO JOGAR?</span>
      <span class="spc">EVENTOS</span>
      <span class="spc">REGRAS</span>
      <span class="spc">SEJA VIP</span>
      <span class="spc">CONTATO</span>
  </div>

  <div id="menu">
    <div class="idmenu">
      <div class="titmn">Nova versão do servidor</div><p>
      <div class="desmn">Fizemos uma atualização na versão do servidor, que agora é: 1.7.2.<br>Lembre-se de atualizar seu Minecraft.</div>
    </div>

    <div class="idmenu">
      <div class="titmn">Torne-se VIP</div><p>
      <div class="desmn">Além de benefícios únicos, os jogadores VIPs têm direito a entrar no servidor lotado.</div>
    </div>

    <div class="idmenu">
      <div class="titmn">Varredura de Players</div><p>
      <div class="desmn">A partir do dia 10/01/2014, jogadores que não entram no servidor pelo menos 6 meses, serão excluídos.</div>
    </div>
  </div>

  <div id="contents">
      <div class="pgtitle">Início</div><p>
      <div class="pgdes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum, purus et pellentesque volutpat, sem magna blandit nulla, ac tempus ipsum purus eu erat. Nulla bibendum augue vel nisi pretium, a sollicitudin eros pretium. Nunc vehicula neque nulla, sodales porta ante rhoncus vel. Donec sed felis id lorem auctor luctus. Nulla viverra vulputate ante, a pharetra nibh commodo eget. Praesent hendrerit congue mauris, a commodo velit porta quis. Aliquam sagittis ut tellus eu iaculis. Ut quis purus in libero convallis dignissim. Morbi augue velit, pharetra consequat sem id, dignissim feugiat sem. Morbi at sapien et dolor facilisis pulvinar. Nulla in pretium ante. Etiam quis pretium orci, sed <a class="no" href="ornare.htm">ornare leo</a>.<p>

Donec elit odio, scelerisque vitae imperdiet id, dictum eget ligula. Phasellus vitae quam pellentesque, rhoncus libero id, rutrum nibh. Vivamus non leo tortor. Duis dictum urna ipsum, nec dignissim massa dictum vitae. Vivamus sed felis turpis. Maecenas arcu mauris, varius eu sem ut, feugiat convallis lacus. Vivamus vel sem nisi. Cras dignissim tortor sit amet velit suscipit rutrum. Nullam id mi eget orci porta consequat.
      </div>
  </div>

  <div id="footer">
     <hr class="spccpy">
     <div class="copy">© 2013 Middlevalley<br>Modelo tableless desenvolvido por HSB Media</div>
  </div>

</div>

</body>
</html>

No caso deste código, fica um espaço sem nada abaixo da div container. Não queria que ficasse assim.

 

Já vi tutoriais colocando min-height, mas como sou um novato em tableless (sim, esse é meu 1º site em tableless), não sei onde colocá-lo.

 

Peço desculpas pela minha ignorância.

 

Atenciosamente,

Pedro HSB

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jeferson Daniel    11

Jeferson Daniel
Postado

O Maujor publicou algo sobre isso há um tempo: http://www.maujor.com/blog/2013/03/08/por-que-height-100-nao-funciona/

 

O estilo fica assim: 

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Caso as coisas não estejam saindo como esperado você pode usar o inspetor de elementos do navegador para ver qual a DIV que não está se comportando direito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

EduardoAugustoPHP    27

EduardoAugustoPHP
Postado 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Middlevalley | Servidor de Minecraft</title> 
<link href="http://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet" type="text/css">
<style>
body {margin: 0; padding: 0; background: #FFE7BA;height:100%;}
html{height:100%;}
 
#container {margin: 1em auto; width: 980px; background: #fff; box-shadow: 4px 5px 5px #8B795E;height:auto;min-height:100%!important;
/*min-height: 733px; height: auto !important;*/}
 
#header {background: url(top.jpg) no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  padding: 12px;}
 #header.title {font-family: Berkshire Swash; font-size: 45px; font-weight: bold; color: #FFFFFF; text-shadow: #666 1px 1px 2px;}
 
#mainnav {background: #EE7600; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px;}
 #mainnav.pages {font-family: Open Sans; font-size: 13px; font-weight: bold; color: #FFFFFF;}
 
#search {float: right; width: 184px; position: relative; top: -4px; left: 9px;}
#menu {float: right; width: 300px; margin: 10px; padding-left: 7px; border-left: 1px dashed; border-left-color: #ccc}
#contents {float: left; width: 632px; margin-top: 12px; margin-left: 12px; margin-right: 8px}
#footer {clear: both; padding-top: 15px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px;}
a.no:link, visited {text-decoration: none; color: inherit}
a.no:hover {text-decoration: underline; color: #EE8237;}
a.ys:link, visited, hover {text-decoration: none; color: inherit}
span.spc {margin: 0 10px;}
span.spc:first-of-type {margin-left: 0;}
span.spc:last-of-type {margin-right: 0;}
div.idmenu {padding-bottom: 30px}
div.titmn {font-family: Open Sans; font-size: 15px; color: #EE7600; border-bottom: 1px solid; border-bottom-color: #EE7600}
div.desmn {font-family: Open Sans; font-size: 13px; color: #4F4F4F; margin-top: -9px}
div.pgtitle {font-family: Open Sans; font-size: 19px; color: #EE7600;}
div.pgdes {font-family: Open Sans; font-size: 14px; color: #4F4F4F; margin-top: -9px; text-align: justify;}
div.copy {font-family: Open Sans; font-size: 11px; color: #9F9F9F; text-align: center}
hr.spccpy {border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
</style>
</head>
 
<body id="body">
<div id="container">
  <div id="header" class="title">
      <div>Middlevalley</div>
  </div>
 
  <div id="mainnav" class="pages">
      <span class="spc">INÍCIO</span>
      <span class="spc">EQUIPE</span>
      <span class="spc">COMO JOGAR?</span>
      <span class="spc">EVENTOS</span>
      <span class="spc">REGRAS</span>
      <span class="spc">SEJA VIP</span>
      <span class="spc">CONTATO</span>
  </div>
 
  <div id="menu">
    <div class="idmenu">
      <div class="titmn">Nova versão do servidor</div><p>
      <div class="desmn">Fizemos uma atualização na versão do servidor, que agora é: 1.7.2.<br>Lembre-se de atualizar seu Minecraft.</div>
    </div>
 
    <div class="idmenu">
      <div class="titmn">Torne-se VIP</div><p>
      <div class="desmn">Além de benefícios únicos, os jogadores VIPs têm direito a entrar no servidor lotado.</div>
    </div>
 
    <div class="idmenu">
      <div class="titmn">Varredura de Players</div><p>
      <div class="desmn">A partir do dia 10/01/2014, jogadores que não entram no servidor pelo menos 6 meses, serão excluídos.</div>
    </div>
  </div>
 
  <div id="contents">
      <div class="pgtitle">Início</div><p>
      <div class="pgdes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum, purus et pellentesque volutpat, sem magna blandit nulla, ac tempus ipsum purus eu erat. Nulla bibendum augue vel nisi pretium, a sollicitudin eros pretium. Nunc vehicula neque nulla, sodales porta ante rhoncus vel. Donec sed felis id lorem auctor luctus. Nulla viverra vulputate ante, a pharetra nibh commodo eget. Praesent hendrerit congue mauris, a commodo velit porta quis. Aliquam sagittis ut tellus eu iaculis. Ut quis purus in libero convallis dignissim. Morbi augue velit, pharetra consequat sem id, dignissim feugiat sem. Morbi at sapien et dolor facilisis pulvinar. Nulla in pretium ante. Etiam quis pretium orci, sed <a class="no" href="ornare.htm">ornare leo</a>.<p>
 
Donec elit odio, scelerisque vitae imperdiet id, dictum eget ligula. Phasellus vitae quam pellentesque, rhoncus libero id, rutrum nibh. Vivamus non leo tortor. Duis dictum urna ipsum, nec dignissim massa dictum vitae. Vivamus sed felis turpis. Maecenas arcu mauris, varius eu sem ut, feugiat convallis lacus. Vivamus vel sem nisi. Cras dignissim tortor sit amet velit suscipit rutrum. Nullam id mi eget orci porta consequat.
      </div>
  </div>
 
  <div id="footer">
     <hr class="spccpy">
     <div class="copy">© 2013 Middlevalley<br>Modelo tableless desenvolvido por HSB Media</div>
  </div>
 
</div>
 
</body>
</html>

Testa aí!!!

 

abs

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