how to make a div take the remaining space in a container

Hello,
  How do I make a div element take the height of the remaining space?.  I have  a container with a nav header and  footer (both are fix). I want to put 2 div element  in between the header and footer. The first div is 200px and the second div should take over the remain space.


Here is a picture
Capture.PNG
I would like the grey area to span the remaining space. ?

Here is my code
Link to plunk: http://plnkr.co/edit/xb1HLIhSfVZzEe2p7bT0?p=preview

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link rel="stylesheet" href="style1.css" />
  <style>
    .rfooter {
      height: 4em;
      text-align: center;
      color: white;
      background-color: green;
      font-size: 1.5em;
    }
    .footerSeachButton {
      background: #2175d9;
      color: white;
      text-align: center;
      height: 4em;
      vertical-align: middle;
      line-height: 4em;
    }
    .footerSeachButton span {
      display: block;
      height: 20px;
    }
    span.footericon {
      line-height: 3;
    }
    .footerLoginButton {
      background: #00308f;
      color: white;
      text-align: center;
      height: 4em;
      vertical-align: middle;
      line-height: 4em;
    }
    .footerLoginButton span {
      display: block;
      height: 15px;
    }
    .searchResulNavBar {
      background-color: #2175d9;
      padding-left: 2em;
      padding-right: 2em;
      height: 3em;
      line-height: 3em;
      color: white;
      text-align: center;
      font-size: medium;
    }
    .success {
      background: yellow;
      height: 200px;
    }
    .info {
      background-color: grey;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="row">
      <nav class="navbar navbar-fixed-top">
        <div class="row searchResulNavBar ">
          <span class="glyphicon glyphicon-chevron-left pull-left navglyphicon" aria-hidden="true"></span>
          <div class="text-center "><strong>Confirmation</strong>
          </div>
        </div>
      </nav>
    </div>
    <div class="row" style="padding-top:3.5em">
      <article>
        <section class="success ">
          need the entire section to be yellow [to section 2-grey]
        </section>
        <section class="info">
          need the entire section to be grey [to the start of the footer]
        </section>
      </article>
    </div>
    <footer class=" row navbar-fixed-bottom rfooter">
      <div class="container">
        <div class="row">
          <div class="col-xs-6 col-md-6 footerSeachButton">

            <span class="glyphicon glyphicon-search footericon" aria-hidden="true"></span>
            <span class="">Search</span>
          </div>
          <div class="col-xs-6 col-md-6 footerLoginButton ">
            <span class="glyphicon glyphicon-user footericon" aria-hidden="true"></span>
            <span class="">Login - Register</span>
          </div>
        </div>
      </div>
    </footer>
  </div>
</body>

</html>

Open in new window

chand pbAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The quick answer is to give your gray area  minimum height. min-height:270px;  http://jsbin.com/yapomuliju/1/edit?html,css,output

    .rfooter {
      height: 4em;
      text-align: center;
      color: white;
      background-color: green;
      font-size: 1.5em;
    }
    .footerSeachButton {
      background: #2175d9;
      color: white;
      text-align: center;
      height: 4em;
      vertical-align: middle;
      line-height: 4em;
    }
    .footerSeachButton span {
      display: block;
      height: 20px;
    }
    span.footericon {
      line-height: 3;
    }
    .footerLoginButton {
      background: #00308f;
      color: white;
      text-align: center;
      height: 4em;
      vertical-align: middle;
      line-height: 4em;
    }
    .footerLoginButton span {
      display: block;
      height: 15px;
    }
    .searchResulNavBar {
      background-color: #2175d9;
      padding-left: 2em;
      padding-right: 2em;
      height: 3em;
      line-height: 3em;
      color: white;
      text-align: center;
      font-size: medium;
    }
    .success {
      background: yellow;
      height: 200px;
    }
    .info {
      background-color: grey;
      min-height:270px;
    }

Open in new window

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
    <div class="row">
      <nav class="navbar navbar-fixed-top">
        <div class="row searchResulNavBar ">
          <span class="glyphicon glyphicon-chevron-left pull-left navglyphicon" aria-hidden="true"></span>
          <div class="text-center "><strong>Confirmation</strong>
          </div>
        </div>
      </nav>
    </div>
    <div class="row" style="padding-top:3.5em">
      <div class="col-xs-12">
      <article>
        <section class="success ">
          need the entire section to be yellow [to section 2-grey]
        </section>
        <section class="info">
          need the entire section to be grey [to the start of the footer]
        </section>
      </article>
    </div>
    </div>
    <footer class=" row navbar-fixed-bottom rfooter">
      <div class="container">
        <div class="row">
          <div class="col-xs-6 col-md-6 footerSeachButton">

            <span class="glyphicon glyphicon-search footericon" aria-hidden="true"></span>
            <span class="">Search</span>
          </div>
          <div class="col-xs-6 col-md-6 footerLoginButton ">
            <span class="glyphicon glyphicon-user footericon" aria-hidden="true"></span>
            <span class="">Login - Register</span>
          </div>
        </div>
      </div>
    </footer>
  </div>
</body>
</html>

Open in new window

Looking at the sample from bootstrap http://jsbin.com/cihacahoxo/1/ when you have one color background it looks like it is supposed to.  With more content http://jsbin.com/cihacahoxo/2/ it is still good.

What you are asking by putting samples into colors like this is very common when you are trying to figure things out.  In a live site however, this is not a very common thing and especially in a responsive site.  I have seen a lot of people try and rack their brain on this only to make these tests.

Another option is to make the container the background color.
SSupremeCommented:
I would suggest in your case with specific markup, not to deal with .info box and sticking (even examples above doesn't work anyway (if you apply color to background) but with .container itself. Like Scott said
Another option is to make the container the background color.

Add following to your style rules:
.container {background: #808080;
height: 100%;
padding-bottom: 100px;}
html, body {height:100%;}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
chand pbAuthor Commented:
Thanks.. I will try the suggestion. But basically, I am trying to build this UI with bootstrap.. Do I have the correct markup? or is there different method you would use. The layout has to be responsive..

file
SSupremeCommented:
It's fine. Not sure whether you need element <article> there, I would use normal <div> instead.
I meant to say that with all those tricky bits it is hard to apply on custom markup, and as you don't want it to change dramatically, I would suggest not to do it.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What you are showing makes a lot more sense.  This is a lot easier to deal with when you have actual content.  The fact is you don't need a 1000px high page and worry about blank space.  You just need to worry about the minimum content of the one item. If you have multiple applications confirmed (if possible) it will just push down.

This is why I said what you were asking is not typical.  Post your final html from the above image.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.