CSS - как сделать 2-колоночный макет 100% высоты с заголовком неизвестной высоты

Question

Мне нужно достичь предмета, и действительно застрял. Чтобы лучше описать, я выложил картинку, что мне нужно получить:

Сначала я пытался сделать это с div s, но в Firefox это выглядит совершенно иначе из-за атрибута width. Хотя моя главная задача - нестандартный режим IE8 (это требование), я хотел, чтобы он выглядел более или менее прилично в Firefox.

Затем я попытался сделать это с таблицей из двух столбцов, и она хорошо работает в IE и довольно хорошо в Firefox, но по какой-то причине, если содержимое нужного столбца становится шире, чем screen, таблица не помещается, и мой контент обрезается по горизонтали рядом с таблицей полоса прокрутки не отображается.

Кроме того, мы рассмотрели более ранние публикации в Stackoverflow с контейнером fixed, но, похоже, он не работает в нестандартном режиме IE8.

Был бы рад услышать любые идеи о том, как это можно сделать.

Answer 1

Это должно помочь - очень простой пример.

http://jsfiddle.net/pRAgY/

Не забудьте отрегулировать ширину правого контейнера, если вы знаете ширину, поскольку граница 6 пикселей (всего 24 пикселя) выходит за пределы доступной ширины 100%.

Answer 2

Может быть, вы можете сделать так:

.left{
    float:left;
    position:absolute;
    width:200px;
    background:red;
    border:2px solid #000;
    top:200px;
    bottom:0;
    left:0;

}
.right{
    overflow:hidden;
    background:green;
    position:absolute;
    top:200px;
    bottom:0;
    left:204px;
    right:0;
    border:10px solid #000;
}

html, body{
    min-height:100%;
    height:100%;
}
.header{
    width:100%;
    height:200px;
    background:yellow;
}

Проверьте это http://jsfiddle.net/QHTeS/