How does the div always get the maximum page size?

Asked

Viewed 1,398 times

1

How is it possible to make the <div> content has as minimum the size of the page in any resolution or monitor without creating scroll bar?

Where the scroll bar should only exist when the contents of the <div> content is filled in enough to do so.

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>

html css

  • width: 100% resolve ? ( for width ) and height: 100% for height

  • @Rafael Kendrik the 100vh made the div stay with the 100% but as I have head and footer each with 100px he creates the scroll bar and hides my footer.

  • @Sneeps Ninja, does not solve why I have header and footer with 100px each and it hides the footer.

  • Why is the question being denied, something wrong with it?

  • If you are using bootstrap, read about the definitions of "containers" in boostrap: http://getbootstrap.com/css/#Overview-container , container-fluid and container

  • remembering that you can also customize the CSS, where you can specify sizes max-width and min-height for any element.

Show 1 more comment

2 answers

1

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

  • Thanks @Israel your solution also worked.

1


You can do as follows using the Calc, with it you avoid using position Absolute or javascript (or Jquery) often forcing the reflow and overlapping of elements with z-index, not to mention that it avoids several bugs and is supported in almost all browsers, with the exception of a few browsers for mobile, which are not worrying, because there is usually scrolling on the page vertical axis on 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 on the "whole page" button to see the full result.

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

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

OBS.: I recommend the use of vendor prefixes to the Calc, currently only need to use -Webkit and the property itself.

  • Dear your solution worked perfectly here in the company project, thank you very much was exactly what I needed, I did not know this Calc function even this 100vh.

  • @Mauricioferraz, thanks for the feedback, any questions about it, you can ask!!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.