html - how do I give a div a responsive height

Question

I'm stating to learn responsive design, but there's one thing I can't seem to figure out, so far...

Here's a working example: http://ericbrockmanwebsites.com/dev1/

I'd like the div element (contactBg) with text inside of it to come down to the bottom of the image to the left. Obviously I can do that by defining the height in px, but then that height is maintained when the rest of the window resizes instead of being fluid.

If there are any good articles out there you may know of that explains how to do this, that would be very helpful, thanks!

Here's the mark up:

<div class="row-fluid">
        <div class="span10 offset1">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span5">
                        <img src="images/logo.jpg" alt="logo" />
                        <img src="images/store.jpg" alt="store" />
                    </div><!-- /span5 -->
                    <div class="span7">
                        <img src="images/portal.jpg" alt="portal">
                        <div class="contactBg">
                            Administration: Emma Jane Julien<br />
                            <a href="mailto:[email protected]">[email protected]</a>
                        </div><!-- /contactBg -->
                    </div><!-- /span7 -->
                </div><!-- /row-fluid -->
            </div><!-- /container-fluid -->
        </div><!-- /span10 offset1 -->
    </div> <!-- /row-fluid -->

And here's the css:

   body {
        background: url(../images/3D2A1698A177AF9B71_218.png) repeat;
    }

    img {
        max-width:100%;
        padding-bottom:1%;
    }

     .container-fluid {
        background:#fff;
        padding: 1%;
    }

      .row-fluid {
        width: 100%;
        *zoom: 1;
 }
      .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 30px;
        margin-left: 1%;
        *margin-left: 2.709239449864817%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
}

      .row-fluid .span10 {
        width: 82.87292817679558%;
        *width: 82.81973668743387%;
      }

      .row-fluid .span7 {
        width: 58.06353591160195%;
        *width: 57.12912895262725%;
      }

      .row-fluid .span5 {
        width: 40.93646408839753%;
        *width: 40.00205712942283%;
      }
      .row-fluid .span4 {
        width: 31.491712707182323%;
        *width: 31.43852121782062%;
      }

    .contactBg {
        background: #282624;
        padding: 3%;
        max-width:100%;
        height:auto;
    }

Answer 1

I know this is a little late to the party but you could use viewport units

From caniuse.com:

Viewport units: vw, vh, vmin, vmax - CR Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

Support: http://caniuse.com/#feat=viewport-units

div {
/* 25% of viewport */
  height: 25vh;
  width: 15rem;
  background-color: #222;
  color: #eee;
  font-family: monospace;
  padding: 2rem;
}

<div>responsive height</div>