Две колонки, фиксированная жидкость с высотой 100%

Как я могу добиться следующего эффекта без использования таблицы?

Пример: http://enstar.nl/example.php (пример может быть не виден на На данный момент серверы имен должны были быть изменены, но мой хостинг не так быстро их обновляет.Должны работать сегодня позже.Приношу извинения за неудобства)

Для всех методов требуется заголовок и/или нижний колонтитул. Я не хочу этого.

Я хочу следующее:

Чистый CSS, без таблиц, 2 столбца, фиксированная жидкость (в таком порядке), если содержимое не достигло нижней части окна просмотра, чем расширить столбцы до него. Остальное до содержания (так же, как липкий нижний колонтитул)

Таблица в масштабе 100%x100% делает это естественным образом. Но я действительно не хочу использовать для этого таблицу.

Есть идеи?

РЕДАКТИРОВАТЬ:

Текущий HTML

<table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td id="navigation" valign="top" align="left">
        </td>
        <td id="content" valign="top" align="left">
        </td>
    </tr>
</table>

html css html-table fixed-width
person nightfox89    schedule 24.10.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

чтобы установить два столбца, есть несколько вариантов, если вы не хотите использовать таблицы

<div id="wrapper" style="height: 100%;">
    <div style="background-color: green;">
        <div id="leftCol" style="float: left; width: 200px;">testing</div>
        <div style="background-color: red; margin-left: 200px;">
            <div id="rightCol" style="height: 900px;" >testing testing testing testing testing testing testing</div>
        </div>
    <div class="clear"></div>
    </div>
</div>

Пока текст внутри rightCol длиннее, чем текст в левом столбце (что может быть обработано минимальной высотой элемента), у вас не должно возникнуть проблем с его масштабированием.

Это также сводит на нет необходимость для Javascript устанавливать вторую ширину. Причина в том, что он установлен на ширину родительского div, которая по умолчанию равна 100%, так как вы отступаете от красного столбца влево на 200 пикселей, он сдвигает раздел дисплея, чтобы вы могли видеть свой левый столбец.

person CBRRacer    schedule 24.10.2011
comment
Если я установлю высоту тела и html на 100%, это, похоже, сработает. Но как заставить его работать с фиксированным макетом? Если я отредактирую столбец слева до ширины: 200 пикселей, как мне изменить ширину столбца справа? См. enstar.nl/example2.php (хммм, я вижу, что мои серверы имен еще не изменились , поэтому пример может быть не виден без изменения вашего хост-файла на новый IP. Они должны заработать в течение нескольких часов. - person nightfox89; 24.10.2011
comment
Что происходит, когда контент выходит за пределы первой страницы? - person 472084; 24.10.2011
comment
@ nightfox89 Единственный реальный ответ, когда вы хотите, чтобы фиксированный столбец, а затем левая сторона была переменной ширины, вам нужно использовать javascript. Пожалуйста, смотрите правки - person CBRRacer; 24.10.2011
comment
@Jleagle Я не уверен, что вы имеете в виду под тем, что происходит, когда контент переходит на первую страницу. вы говорите о том, что контента больше, чем ширины, или вы говорите о первоначальном рендеринге или о чем? - person CBRRacer; 24.10.2011
comment
Если содержимое в одном столбце станет выше области просмотра, сделает ли это один столбец выше другого? - person 472084; 24.10.2011
comment
@Jleagle, пожалуйста, взгляните на мой обновленный ответ. Я считаю, что это похоже на макет стиля спрайта. - person CBRRacer; 24.10.2011
comment
Хм, текущие примеры помогли мне понять это немного больше. Но, насколько я вижу, у меня есть только 2 варианта: а) использовать таблицу б) использовать javascript У меня был опыт использования javascript раньше, но он был слишком медленным. Вы можете увидеть отставание при изменении размера области просмотра. Так что я думаю, что мне придется пойти с дизайном стола. 1 стол не такой уж грех, не так ли? ;) - person nightfox89; 25.10.2011
comment
@ nightfox89 nightfox89 Если вас не беспокоит обратная совместимость, вы всегда можете использовать атрибут table-column, но поддержка в IE началась только в IE8. - person CBRRacer; 25.10.2011
comment
Ну, IE7 обязателен. IE6 может остаться в аду - person nightfox89; 25.10.2011