Невозможно растянуть css divs 100% по вертикали и по горизонтали

Question

Я пытаюсь преобразовать свой дизайн таблицы в проект css div.

Что не работает:

1.) черный DIV будет иметь элементы списка поэтому мне нужно скроллбары, который отображается в данный момент. Хорошо. Но я не хочу ограничивать высоту до 400 пикселей. Мой прежний дизайн имел 100% высоты, поэтому он занимает все вертикальное пространство на экране.

2.) Красный div (rightContent) должен иметь фиксированную ширину 200 пикселей; Когда я устанавливаю это, что мне нужно установить, leftContent занимает все горизонтальное пространство.

Прежде всего, в старой таблице не было наружной вертикальной полосы прокрутки, видимой вокруг всего макета.

Я испытал это на IE9

http://jsfiddle.net/pEMwP/4/

Answer 1

Для Question1: Если вы хотите прокрутки, вы не должны установить свойство высоты для авто. Вместо этого вы можете динамически установить высоту Div с помощью Javascript.

document.getElementById("ListData").style.height=<your Size>; 

К вопросу 2: Если вы хотите установить высоту Красной Div. Вы можете указать так.

height: 200px; 
overflow:hidden; 

это ограничит div до 200px. Теперь вы можете увеличить свою другую ширину div/divs, чтобы занять это пространство.

Answer 2

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

Вы можете использовать display: table;, display: table-row; и display: table-cell; чтобы получить семантически корректную (это не табличные данные, правильная?) структура, которая ведет себя точно так же, как и неправильное использование <table>. По общему признанию, вам придется реализовать некоторую рабочую среду для IE6 & 7 (вероятно, 2-3% пользователей), но, возможно, вы можете согласиться с тем, что она удобна, но несовершенна в этих браузерах?

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/