Проблемы с переполнением с высотой: 100%;

Question

LIVE CODE
Я пытаюсь, чтобы мое основное содержание div class="mc" отображалось только на нижней части 10% экрана. Позволяя пользователям просматривать как можно больше фонового изображения и все же позволять пользователю видеть заголовок статьи.

Моим решением было установить .mc на 100% высоту и вычесть из нижней части размера видовых экранов. все сделано в CSS

CSS

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

Моей проблема: Когда содержание идет больше, то высота 100% она падает в пустоту. Я попробовал мин-высоту; к сожалению, это еще хуже ухудшает код. Выделите в нижней части LIVE CODE увидеть проблему

или

ERROR'd изображение (вы можете сказать, что это заканчивается из .box-тени();)

---

Вот как это должно выглядеть

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> 

Answer 1

Вы можете поместить текстовый контейнер beloow изображения и использовать отрицательное верхнее поле или отрицательный топ с position: relative позиционировать содержание:

margin-top: -10%; 

или

position: relative; 
top: -10%; 

Этот последний метод будет оставить пустое пространство ниже содержание к размеру репозиции.