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>
container-fluid
econtainer