make div change height dynamically

Question

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.

You can get window height from `$(window).height()` and then compute height of containers, btw using `position:fixed;` for all main containers is horribile way to design layout. — Sojtin, Oct 25 '16 at 08:59
using 100vh to get height from css is much better than using JS. Also your code has a dependency on Jquery — Ben Taliadoros, Oct 25 '16 at 09:00
Duplicate - http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 — Paulie_D, Oct 25 '16 at 09:06

Ben Taliadoros · Accepted Answer · 2016-10-25T09:02:19.337

2

CSS for the height:

.first-row {
   height: 150px;
}

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

.last-row {
   height: 120px;
}

edited Oct 25 '16 at 09:02

answered Oct 25 '16 at 09:00

Ben Taliadoros

7,003
15
60
97

I was going to make a pen using flexbox but @Kevin Farrugia beat me to it. It's definately better to use that than " display: table-cell;" – Ben Taliadoros Oct 25 '16 at 09:06
Remember those techniques are not always supported: calc: http://caniuse.com/#feat=calc viewport units: http://caniuse.com/viewport-units/embed/ – Gabe Hiemstra Oct 25 '16 at 09:12
Thank you Ben your solution worked. Now how do I vertically align the middle row content pls? – Corne Lombaard Oct 25 '16 at 09:22
So I'd use flexbox to be honest - a great guide here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ but if it's too advanced and you know your content height you can add a margin or padding to the top which is half the height - half the height of your content. This can be done in a calc function too, for example if your content has 40px height, margin-top: calc(50% - 20px); Let me know how you get on. If you're struggling create a codepen and I'll help you – Ben Taliadoros Oct 25 '16 at 09:49
No worries - there should be a tick under the number of votes which you can click – Ben Taliadoros Oct 25 '16 at 15:49

score 0 · Answer 2 · answered Oct 25 '16 at 09:01

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;
}

<div class="top">TOP</div>
<div class="middle">MIDDLE</div>
<div class="bottom">BOTTOM</div>

Kevin Farrugia · Answer 3 · 2016-10-25T09:17:52.373

0

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

edited Oct 25 '16 at 09:17

answered Oct 25 '16 at 09:04

Kevin Farrugia

6,431
4
38
61

Flexbox is the better solution, i was just making a codepen! – Ben Taliadoros Oct 25 '16 at 09:05

score 0 · Answer 4 · answered Oct 25 '16 at 09:06

As suggested, try using flexbox:

<style>
.container {
  display: flex;
  flex-flow: column wrap;
  align-items: stretch;
  height: 100%;
}
.row{}
.row.row1{height: 150px;}
.row.row2{flex: 1 1 auto;}
.row.row3{height: 120px;}
</style>

<div class="container">
  <div class="row row1">First row</div>
  <div class="row row2">Middle row</div>
  <div class="row row3">Final row</div>
</div>

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

score 0 · Answer 5 · answered Oct 25 '16 at 09:08

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;
}

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
<div>

make div change height dynamically

5 Answers5