Как сверстать двухколоночный макет с вложенным полупрозрачным дивом?

Question

[mletov]

Пожалуйста, подскажите, есть стандартный макет, хедер и футер фиксированной высоты, основная область из 2 колонок, весь макет с min-height:100% по высоте экрана

Приблизительно такая разметка

<header></header>
<div class="main">
        <div class="col1">
                123
       </div>
      <div class="col2">
                <div class="col2__inner">
                              456
                 </div>
       </div>
</div>
<footer></footer>

Но вот заморочка:
У col2 padding:5px и какой-то повторяющийся background-image
А col2__inner с полупрозрачным фоном с backgound opacity:0.5,, должен тянуться по высоте левой колонки на 100% по высоте, как бы это сделать без JS.

Answer 1

[westdp]

Если я Вас правильно понял, то задаете левой колонке position: reletive;

И этому блоку задаете, через псевдоэлемент
div:before{
content: '';
position: absolute;
height: 100%;
widht: 100%;
background-color: rgba(0,0,0,0.5);
}

Если есть рамка то сделай по высоте и ширине по 110% и для блока(левая колонка): overflow: hidden;

Comments

[mletov]

Колонки я сделал через display:table и display: table-cell. Т е идея в том, чтобы перенести col2__inner в col1 и относительно него задавать высоту?

[westdp]

mletov: Покажите макет реальный? или залейте на jsfiddle.net

[mletov]

Спасибо! сделать область контента с position absolute оказалось хорошей идеей