Автоматическая подгонка ширины к экрану / родительскому элементу

Question

Я уверен, что это просто, но ...

У меня есть следующее:

http://jsfiddle.net/SUBH3/1/

HTML:

<div id='wrapper'>
    <div id='panel1'></div>
    <div id='panel2'></div>
    <div id='panel3'>gest</div>
</div>

CSS:

#wrapper
{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
#panel1
{
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height:100%;
    width:35px;
    background-color:blue;
}

#panel2
{
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height:100%;
    width:240px;
    background-color:red;
}


#panel3
{
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height:100%;
    background-color:green;
}

Я хочу, чтобы последняя зеленая панель заполнила оставшееся пространство. Я попробовал несколько вещей, но не могу этого сделать. Я могу использовать таблицу для достижения того, чего я хочу, что я, вероятно, буду делать, я просто хочу знать, как я могу сделать это с помощью CSS?

Я тоже пробовал это с элементами списка, но в итоге столкнулся с той же проблемой.

Спасибо,

Крис.

Answer 1

Я понял, я понял. Вы перемещаете две другие панели, но если вы не перемещаете последнюю, она заполнит остальное пространство. Обычно он будет плавать вокруг дна левого двух контейнеров, но, поскольку они имеют высоту 100%, это не так.

Таким образом, вы должны использовать это правило стиля:

#panel3
{
    height:100%;
    background-color:green;
}

http://jsfiddle.net/hGWyF/

Answer 2

Удалите как float, так и position, по умолчанию он заполнит оставшееся пространство, потому что все элементы имеют высоту 100%.