Чистый CSS заголовок минимальной высоты, тело максимальной высоты в абсолютно позиционированном DIV

Question

У меня есть виджет редактора HTML, который я хочу отображать в абсолютно позиционированном DIV фиксированного размера. Однако я не знаю заранее абсолютный размер DIV, и он может измениться, например, если пользователь изменит размер окна.

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

Если я использую таблицы, это очень легко достичь. Я просто отключаю границы, отступы и поля и добавляю каждый DIV в ячейку в своем собственном ряду, и, возможно, играю с max-height на элементах управления DIV. Вот как это выглядит:

Базовый стол http://img407.imageshack.us/img407/8435/table1.png

Та же таблица с измененным размером окна другим способом http://img264.imageshack.us/img264/6438/table2p.png

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

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

Конечно, я могу сделать так, чтобы родительский DIV имел display: table и дочерние DIVs, завернутые в display: table-row DIVs, и сами по себе имеют display: table-cell, но ... ну ... в этом случае это точно то же самое, что использовать TABLE, TR и TD, но в десять раз более уродливо ради чистоты CSS. (Зачем?)

Итак, без непосредственного использования display: table & friends, ни TABLE / TR / TD, ни JavaScript, есть ли чистый способ CSS сделать это? Другими словами, существует ли чистый CSS-способ сказать, что DIV1 занимает как можно меньше вертикального пространства, а DIV2 занимает оставшееся вертикальное пространство в родительском элементе?

Если нет, я вполне готов прекратить подписываться на менталитет "чистого CSS". Это вызвало у меня достаточно горя и очень мало пользы для разработчиков или конечных пользователей.

Answer 1

У вас есть только так много вариантов. Если вы хотите вести себя как таблица без использования таблицы, тогда используйте display: table и дайте себе возможность позже передумать. Таким образом, хотя уродливая разметка (субъективная) для меня имеет больше смысла: у вас останется еще несколько элементов, но вы не будете привязаны к конкретному макету.

Если вас не волнует разметка, нажмите на курок и используйте стол. Это будет легче в краткосрочной перспективе.

Мой вопрос: если вы не хотите использовать JavaScript, как вы будете реализовывать элементы управления редактора?

Answer 2

Этот вопрос говорит о проблеме, с которой я сталкивался в последнее время, и с которой многие сталкивались: соблюдайте правило «только таблицы для табличных данных» или просто используйте таблицы и выполняйте 1/3 работы. Тот факт, что это даже трудное решение, является демонстрацией того, насколько безумны все мы. Забудьте о стандартах, используйте таблицы, делайте это чисто и просто. Если у W3C есть проблема с этим, они могут пожаловаться сразу после создания лучшей альтернативы.

Answer 3

Я бы ответил вторым perfectDay, но я бы попросил вас сойти с ума и попытаться описать, как вы хотели бы, чтобы это выглядело. Может быть, с ascii-art или ссылкой на графику, чтобы мы знали, какой макет вы хотели бы, чтобы мы помогли вам достичь.

Я бы также добавил, что я не спал (снова) недавно, так что ... если я пропустил очевидное супер-четкое описание того, что вы хотели бы, чтобы мы помогли вам достичь ваших самых Искренние извинения. :)

Answer 4

Насколько я знаю, использование процента для ширины / высоты должно работать нормально.