asked on

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

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

SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

SSupreme

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chand pb

ASKER

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..

SSupreme

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.

SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial