Dynamic height calculation via CSS

Posted By : Priya verma | 27-Jun-2016

css

Dynamic height calculation via CSS

We know that when we design any app or website their header and footer section height is fixed but we don’t know the height of the device and the content div. In this case we use jquery to calculate the height of content div area. But now using CSS we can set height without making header and footer height fixed or using jquery function.

We use css property height: calc( 100% - div_height );

Here, Calc is a function. It uses mathematical expression by this property we can set the height content div area dynamically.

In above image, i have designed a page and i want this page should work on different devices without scrolling in the page , also without using jquery function() to calculate the height of div_container. The div_container height is dynamically calculated and set to div_container based on the device height.

CSS

.ui-page {
  height: 100%;
  margin: 0;
  padding: 0;
}
.header.ui-header, .footer.ui-footer{
   background-color: rgba(255, 133, 86, 0.72);
}
.ui-page .ui-content {
  height: calc(100% - 44.50px - 44.50px);  /* height = (page height - header-height - footer-height)   */
  background: rgb(245, 218, 210);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

HTML

       

<div data-role="page" id="home”>
   <div data-role="header" class="header">
     <h1> Home Page </h1>
   </div>

   <div role="main" class="ui-content">
   <p> Content </p>
     <p> Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling.. </p>
   </div>
 
   <div data-role="footer" class="footer">
     <h1> Footer </h1>
   </div>
 </div>

Note: As you can see in the above code we use css property calc. It works as responsive and give the content area height like jquery does.

When we use this property then we don’t need to fix position of header or footer.

THANKS