We help IT Professionals succeed at work.

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

chand pb
chand pb asked
on
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

Comment
Watch Question

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
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.
Commented:
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

Author

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

Commented:
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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
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.