Как растянуть блок на оставшуюся высоту.

[ELBegemotos]

Пробую верстать сайт.Возникла проблема растянуть блок блок на оставшуюся высоту,но не знаю как это сделать.
Пробовал три метода.
Вот скрин что нужно сделать.

[hide]

[/hide]

Вот код HTML:

<!-- Контент -->         <section id="content" class="margin-center">            <!-- Левая часть контента -->             <section id="left-aside-content">                <article>                    <header class="hookah-icon"><a href="#"></a></header>                    <p>Максимальное наслаждение от курения ароматного, сладкого кальяна.</p>                </article>                                <article>                    <p>Вступите в группу “В контакте”, жмите “рассказать друзьям” и получите 5% скидки.</p>                    <header class="vk-icon"><a href="#"></a></header>                </article>                                <article>                    <header class="taste">                        <p>asdasdasd</p>                    </header>                </article>            </section>            <!-- Левая часть контента -->            <!-- Правая часть контента -->            <section id="right-aside-content">                            <article>                    <header class="order">                        <p>asdasdasd</p>                    </header>                </article>                                <article id="block-about-us">                    <header>О нас:</header>                    <p>                    Мы предоставляем нашим клиентам отборные кальяны лучшего качества.                     Воссоздаем атмосферу уюта, располагающую к вашему расслаблению и душевному общению.                    </p>                    <footer>                     <span>+7 (916) 840 - 04 - 68 </span>                     <a href="" title="">vk.com/club73938279</a>                    </footer>                </article>                            </section>             <!-- Правая часть контента -->        </section>        <!-- Контент -->  

Вот CSS код:

/*------ Content ------*/#content{ border-top: 1px solid #2a2d33;}#left-aside-content,#right-aside-content{ width:50%; display:table-cell; }#right-aside-content{vertical-align:top;padding-left:34px;}#left-aside-content article,#right-aside-content article{ display:table; width:100%; margin-top:25px;}#left-aside-content article > p,#block-about-us{    background:#2c2f35;    color:#545862;    text-align:justify;    font-size:16px;}#left-aside-content article > p{    display: table-cell;    margin:10px 0;    vertical-align:middle;    padding:0 25px;    line-height:1.2;}.hookah-icon,.vk-icon{    height:127px;    width:127px;    display: table-cell;}.hookah-icon{    background:url("../img/hookah_icon.png") no-repeat;    padding: 0 32px 0 0;}.vk-icon{    background:url("../img/vk_icon.png") right no-repeat;    padding:0 0 0 32px;}.taste{    background:url("../img/picture_taste.jpg") no-repeat;    height:127px;}.taste p{    background:rgba(0,0,0,0.5);    height:127px;    width:100%;    display:none;}.taste:hover p{ display: block; }.order{    background:url("../img/picture_order.jpg") no-repeat;    height:127px;}#block-about-us{}/*------ Content ------*/ 

Испробовал такой метод.(relative + absolute)

Но и тут вышло у меня проблема.
Текст(отмеченный красным) влезает в блок,в следствии чего его не видно.
Что делать,правильный ли мой метод,можно ли исправить эту ошибку или есть другой,более просто метод?

[hide]

[/hide]

 

CSS:

/*------ Content ------*/#content{ border-top: 1px solid #2a2d33; display:table;position:relative;}#left-aside-content,#right-aside-content{ width:50%; display:table-cell; }#right-aside-content{position:absolute;width:50%;height:100%;margin-left:34px;}#left-aside-content article,#right-aside-content article{ display:table; width:100%; margin-top:25px;}#left-aside-content article > p,#block-about-us{    background:#2c2f35;    color:#545862;    text-align:justify;    font-size:16px;}#left-aside-content article > p{    display: table-cell;    margin:10px 0;    vertical-align:middle;    padding:0 25px;    line-height:1.2;}.hookah-icon,.vk-icon{    height:127px;    width:127px;    display: table-cell;}.hookah-icon{    background:url("../img/hookah_icon.png") no-repeat;    padding: 0 32px 0 0;}.vk-icon{    background:url("../img/vk_icon.png") right no-repeat;    padding:0 0 0 32px;}.taste{    background:url("../img/picture_taste.jpg") no-repeat;    height:127px;}.taste p{    background:rgba(0,0,0,0.5);    height:127px;    width:100%;    display:none;}.taste:hover p{ display: block; }.order{    background:url("../img/picture_order.jpg") no-repeat;    height:127px;}#block-about-us{height:100%;}/*------ Content ------*/

Пробовал сделать с  помощью имитации  через css таблицу(table-row,table-cell,table - display),я думал,что тогда,как и таблица будет себя вести элементы,но нет,не получилось.Есть вариант использовать таблицы,но я не хочу этого делать,не сторонник верстки таблицами.
Что делать?  Есть ли выход из моей ситуации?

Заранее благодарен!

[antonKar]

Если абсолют котируется, то что-то типа

 

#right-aside-content { position: relative; }

#block-about-us { position: absolute; top: 150px; right: 0; left: 0; bottom: 0; }

[ELBegemotos]

Если абсолют котируется, то что-то типа

 

#right-aside-content { position: relative; }

#block-about-us { position: absolute; top: 150px; right: 0; left: 0; bottom: 0; }

Попробовал ваш вариант,но к сожалению,не сработал.