Overflow issues with height:100%;
===

[**LIVE CODE**][1]  
I'm trying to have my maincontent div `class="mc"` just appear on the bottom 10% of the screen.  Allowing users to view as much of the background image as possible and still allow the user to see the title of the article.

My solution was to set a `.mc` to 100% height and subtract that from the bottom of the viewports size.  all done in css  

**CSS**

    .mc{height:100%;width:100%; background:#fff;z-index:1; position:absolute; bottom:-90%; }

My problem: When content goes larger then 100% height it falls into a void.  I tried min-height; unfortunatly it breaks the code even worse. Scroll to the bottom of [**LIVE CODE**][2]  to see the problem

 or

ERROR'd picture (you can tell it ends from the .box-shadow();)  

![enter image description here][3]
*********************
**Here's the way it should look**
![heres a simple mock up][4]

**HTML**

    <article class="mc">
    <section class="cc">
        <div class="margin_wrapper">
            <header>
                <hgroup>
                    <h1 class="at">rocking grass out styles for everyone.</h1>
                    <h2 class="ast">The you mice structure for to of almost ability an trying the when designer
                        dissolute that constructing in quickly distinct...</h2>
                </hgroup>
            </header>
            <h3 class="title_header">the good</h3>
            <p>...</p>
            <h3 class="title_header">the bad</h3>
            <p>...</p>
            <h3 class="title_header">the ugly</h3>
            <p>...</p>
        </div>
    </section>
    <aside></aside>
</article>
<div class="logo"></div>
<figure>
    <img src="asset/img/full/bold.png">
</figure>

  [1]: http://designobvio.us/css/
  [2]: http://designobvio.us/css/
  [3]: http://i.stack.imgur.com/b0mmY.png
  [4]: http://i.stack.imgur.com/DWm4s.png