make div change height dynamically

make div change height dynamically

I have a page with 3 rows. The first row is a fixed height of 150px and the last row is a fixed height of 120px. I need the middle row to adjust according to the height of the window so that all three rows are visible and there are no scroll bars visible. The middle row must adjust dynamically so that even after loading if you move the browser window to another screen that is smaller the middle row must adjust accordingly. Secondly the middle row must have it's content aligned vertically middle and horizontally center. Any help is appreciated.

Answer by Ben Taliadoros for make div change height dynamically

CSS for the height:

.first-row {     height: 150px;  }    .middle-row {     height: calc(100vh - 150px - 120px);  }    .last-row {     height: 120px;  }  

Answer by connexo for make div change height dynamically

Run the code snippet in full page mode (!). Use css calc function to automatically calculate the height of middle container.

body {     margin: 0;   }  .top {    background-color: #f0f0f0;    height: 150px;  }  .bottom {    background-color: #ddd;    height: 120px;  }  .middle {    background-color: teal;    display: table-cell;    height: calc(100vh - 270px);    text-align: center;    vertical-align: middle;    width: 100vw;  }

TOP
  
MIDDLE
  
BOTTOM

Answer by Kevin Farrugia for make div change height dynamically

Personally the cleanest solution is using flexbox:

.container {    display: flex;    flex-direction: column;  }    .dynamic {    flex: 1 1 auto;  }  

http://codepen.io/kevinfarrugia/pen/wzOqGo?editors=1100#0

Answer by Gabe Hiemstra for make div change height dynamically

As suggested, try using flexbox:

    
    
First row
    
Middle row
    
Final row
  
  

Don't forget to add your vendor prefixes when using this.

Answer by NoRyb for make div change height dynamically

I use flexboxes for these things: A Complete Guide to Flexbox

.container {      display: flex;    flex: 1 1 auto;    flex-direction: column;  }    .header {    height: 50px;    background-color: green;    flex: 0 0;  }    .footer {    height: 30px;      background-color: red;    flex: 0 0;  }    .content {    background-color: blue;    flex: 1 1 auto;    min-height: 50px;  }

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72