Skip to main content
Formatação do corpo da pergunta e remoção de conteúdo redundante/desnecessário remoção de tag asp.net
Fonte Link

Gostaria de saber como possoComo é possível fazer paracom que a div<div> conteúdo sempre cresça no máximo para preencher a telatenha como tamanho minimo o tamanho da pagina em qualquer resolução ou monitor sem criar barra de rolagem.?

Eu queroSendo que tipo o conteúdo tenha como tamanho minimo o tamanho da pagina.

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

<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>

Meu CSSCó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,
    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>

Gostaria de saber como posso fazer para que a div conteúdo sempre cresça no máximo para preencher a tela em qualquer resolução ou monitor sem criar barra de rolagem.

Eu quero que tipo o conteúdo tenha como tamanho minimo o tamanho da pagina.

Ele só deve criar barra de rolagem quando o conteúdo da div de conteúdo estiver preenchido o suficiente para isso.

<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>

Meu CSS

html, body, .maximoHeight {
height: 100%;
}

#cabecalho {
    height:100px;
    background-color: red;
}

#conteudo {    
    min-height: 100%;
    background-color: yellow;
}

#rodape {
    height: 100px;
    background-color: green;   
}

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>

Fonte Link

Como deixa a div sempre com o tamanho máximo da página?

Gostaria de saber como posso fazer para que a div conteúdo sempre cresça no máximo para preencher a tela em qualquer resolução ou monitor sem criar barra de rolagem.

Eu quero que tipo o conteúdo tenha como tamanho minimo o tamanho da pagina.

Ele só deve criar barra de rolagem quando o conteúdo da div de conteúdo estiver preenchido o suficiente para isso.

<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>

Meu CSS

html, body, .maximoHeight {
height: 100%;
}

#cabecalho {
    height:100px;
    background-color: red;
}

#conteudo {    
    min-height: 100%;
    background-color: yellow;
}

#rodape {
    height: 100px;
    background-color: green;   
}