Simple Way To Set The Height/Width Dynamically Using CSS

While working on the HTML designs, I came across some of the design issues that I would like to share them along with the solutions.

Requirement #1: A scrollable view with fixed header and footer with 50px of height ( should work for multiple resolutions ).

Basic Layout :

Header
      
          Content....
      
      footer

Problem: We need to calculate the height of the body section, then set the height of the content.

Content’s Height = Window’s Height – ( Header’s height + Footer’s height )

Solution: We don’t need to bang our head calculating the stuffs, rather lets css handle these stuffs as below:

// Set the elements position
      .header, .footer, .content {
            position: absolute;
            width: 100%;
      }
     
      // Set the header & footer height
      .header, .footer { height: 50px; }
 
      // Align the header and footer
      .header { top: 0; }
      .footer { bottom: 0; }
 
      // Set the upper & lower alignment and let the css calculate the height
      .content {
            top: 50px;
            bottom: 50px;
      }

Thats all, we gets the desired layout. Similarly, we can manage the height also.

Requirement #2: A list of menu with its image on left side and a navigation icon on right side ( should work for multiple resolutions ).

   Basic Layout :

• Menu 1

….. …..

Problem: We need to calculate the width of the li, then set the width of the span.

Span’s width = Li’s width – ( Image’s width + navigator’s width )

Solution: lets css handle the width for the text to be show inside li as below:

ul.listView {
            width: 100%;
            height: auto;
      }
 
      li.list {
            display: block;
            padding: 0 40px;
            line-height: 40px;
            height: 40px;
      }
 
      li.list img {
            height: 40px;
            width: 40px;
      }
     
      li.list img.menuImage { float: left; }
      li.list img.navImage { float: right; }