1

Como é possível fazer com que a <div> conteúdo tenha como tamanho minimo o tamanho da pagina em qualquer resolução ou monitor sem criar barra de rolagem?

Sendo que barra de rolagem só deve existir quando o conteúdo da <div> conteúdo estiver preenchido o suficiente para isso.

Código atual:

    html,
    body,
    .maximoHeight {
      height: 100%;
    }
    #cabecalho {
      height: 100px;
      background-color: red;
    }
    #conteudo {
      min-height: 100%;
      background-color: yellow;
    }
    #rodape {
      height: 100px;
      background-color: green;
    }
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
  <title></title>
  <link href="../Content/bootstrap.css" rel="stylesheet" />
  <link href="../Content/Site.css" rel="stylesheet" />
</head>

<body>
  <form id="form1" runat="server" class="maximoHeight">
    <div class="container maximoHeight">

      <div id="cabecalho" class="row">
        <div class="col-md-12">
        </div>
      </div>

      <div id="conteudo" class="row">
        <div class="col-md-12">
          <asp:ContentPlaceHolder ID="cphConteudo" runat="server">
          </asp:ContentPlaceHolder>
        </div>
      </div>

      <div id="rodape" class="row">
        <div class="col-md-12">
        </div>
      </div>

    </div>
  </form>
</body>

</html>

6
  • width: 100% resolve ? ( para largura ) e height: 100% para altura Commented 13/11/2015 às 15:47
  • @Rafael Kendrik o 100vh fez a div ficar com o 100% mas como eu tenho cabecalho e rodape cada um com 100px ele cria a barra de rolagem e esconde meu rodapé. Commented 13/11/2015 às 16:24
  • @SneepS NinjA, não resolve por que como tenho cabeçalho e rodapé com 100px cada e ele esconde o rodapé. Commented 13/11/2015 às 16:26
  • Por que a pergunta esta sendo negativada, a algo errado nela? Commented 13/11/2015 às 16:33
  • Se vc está utilizando bootstrap, leia sobre as definições de "containers" no boostrap: getbootstrap.com/css/#overview-container , container-fluid e container Commented 13/11/2015 às 16:37

2 Respostas 2

1

Você pode fazer da seguinte forma utilizando o calc, com ele você evita utilizar position absolute ou javascript (ou Jquery) forçando muitas vezes o reflow e sobreposição de elementos com z-index, sem falar que evita diversos bugs e é suportado em quase todos os navegadores, com exceção de alguns browsers para mobile, o quais não são preocupantes, pois normalmente há rolagem no eixo vertical da pagina no mobile ou seja a barra de rolagem que você disse.

Utilize o seguinte código:

/*Resets*/ 
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html,
 body,
 .maximoHeight {
   height: 100%;
 }
 #cabecalho {
   height: 100px;
   background-color: red;
 }
 #conteudo {
   min-height: calc(100vh - 200px);
   background-color: yellow;
 }
 #rodape {
   height: 100px;
   background-color: green;
 }
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
  <title></title>
  <link href="../Content/bootstrap.css" rel="stylesheet" />
  <link href="../Content/Site.css" rel="stylesheet" />
</head>

<body>
  <form id="form1" runat="server" class="maximoHeight">
    <div class="container maximoHeight">

      <div id="cabecalho" class="row">
        <div class="col-md-12">
        </div>
      </div>

      <div id="conteudo" class="row">
        <div class="col-md-12">
          <asp:ContentPlaceHolder ID="cphConteudo" runat="server">
          </asp:ContentPlaceHolder>
        </div>
      </div>

      <div id="rodape" class="row">
        <div class="col-md-12">
        </div>
      </div>

    </div>
  </form>
</body>

</html>

Clique no botão "página toda" para ver o resultado por completo.

Explicação: apenas troquei o valor da min-height pelo calc, subtraindo 100vh (ou a altura total da viewport) pela altura dos demais itens que compõem o documento (no caso 200px). Após adicionei um resets básico para remover margin e padding e adicionar um box-sizing: border-box para todos os elementos, evitando assim a barra de rolagem:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

OBS.: recomendo a utilização de vendor prefixes para o calc, atualmente apenas é necessário utilizar -webkit e a propriedade propriamente dita.

2
  • Cara sua solução funcionou perfeitamente aqui no projeto da empresa, muito obrigado era exatamente o que eu precisava, eu não conhecia essa função do calc nem mesmo esse 100vh. Commented 13/11/2015 às 17:07
  • @MauricioFerraz, obrigado pelo feedback, qualquer dúvida a respeito, pode perguntar!! Commented 13/11/2015 às 17:08
1

Boas, Utilize jQuery para verificar o tamanho da janela do cliente que está renderizando a sua pagina.

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<script>
 $(document).ready(function(){
  setHeight100();    
 });

 $(window).resize(function(){
  setHeight100(); 
 });

 function setHeight100(){
  alturaTotal = $(window).height();

  alturaProvavelNecessaria = alturaTotal - ( $('#cabecalho').height() + $('#rodape').height());

  $('#conteudo').css('overflow','auto').height(alturaProvavelNecessaria);
 }
</script>
1
  • Obrigado @Israel sua solução também funcionou. Commented 13/11/2015 às 17:12

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 .