LIVE CODE
I want the maincontent div with class="mc" to only occupy the bottom 10% of the screen. This way, users can see more of the background image while still being able to read the article title.
To achieve this, I set the height of .mc to 100% and positioned it at the bottom of the viewport using CSS.
CSS
.mc {
height:100%;
width:100%;
background:#fff;
z-index:1;
position:absolute;
bottom:-90%;
}
However, the problem arises when the content exceeds 100% height, causing it to disappear. I attempted using min-height but it made the issue worse. Check out the LIVE CODE for a demonstration of the problem.
or
Error message (you can see the cutoff point from the box-shadow();)
Desired Look
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>