javascript - How to size a DIV between two fixed attributes -

quick question.

i have 2 navigation bars on site i'm working on. first fixed-height bar running width of screen on top of page, second fixed-height bar running width of screen on bottom of page.

is there way make content div between them resize based on percentage of remaining space, rather percentage of total page size? window shrunk vertically, content div in middle resize accordingly while 2 bars stay same size.

any appreciated!

here 2 of commonly used methods this:

1. calculate content's size subtracting header + footer height using calc

html,  body {    height: 100%;  }    .bar {    background: #ccc;    height: 50px;  }    .content {    background: #aaa;    height: calc(100% - 100px);  }

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

2. use vh (viewport height) units calculate layout out of 100vh

.bar {    background: #ccc;    height: 10vh;  }    .content {    background: #aaa;    height: 80vh;  }

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

wiki