How do you leave the div always with the maximum page size?

Navigation
1

How can I make sure that% content is minimized to the size of the page on any resolution or monitor without creating a scroll bar?

Being that the scroll bar should only exist when the content of <div> content is filled up enough for that.

Current code: 

    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>
    
asked by anonymous 13.11.2015 / 16:30

2 answers

1

You can do this using calc , with it you avoid using position absolute or javascript / em>) often forcing reflow and overlapping elements with z-index , not to mention it avoids various bugs and is supported on almost all browsers, some browsers for mobile, which are not worrisome, since there is usually scrolling on the vertical axis of the page on the mobile or the scroll bar you said.

Use the following code: 

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

Click the "entire page" button to see the result completely.

Explanation: I just changed min-height by calc , subtracting 100vh (or the total height of viewport ) by other items that make up the document (in the 200px case). After adding a basic resets to remove margin and padding and add box-sizing: border-box to all elements, thus avoiding the scrollbar: 

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

NOTE: I recommend using vendor prefixes for calc , currently only need to use -webkit and the property itself.

    
13.11.2015 / 17:40
1

Well, use jQuery to check the size of the client window that is rendering your page. 

<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>
    
13.11.2015 / 17:33
Horizontal RecylerView as WhatsApp CSS - Display centered text with other text aligned to the side