фиксированный макет + широкий контент = таблицы? - PullRequest
2 голосов
/ 09 марта 2012

У меня есть веб-страница с фиксированной шириной. Ранее он использовал таблицы, и я воссоздал его, используя div. В целом, я доволен этим (теперь нижний колонтитул хорошо ложится).

Но есть проблема - я не могу контролировать содержимое, и иногда оно может содержать очень широкие элементы. В текущем макете (divs), если элемент не помещается на экран, вам нужно прокрутить вправо (вы не можете этого избежать), и в этом случае фрейм страницы заканчивается, вы увидите пустое пространство (то есть без верхнего, нижнего колонтитула).

Причина в том, что div расширяется только до видимого окна.

Я вижу только два варианта решения:

  • вернуться к макету таблицы. Это работало правильно для этого случая - расширялось за рамки окна, если содержание шире.
  • реализовать решение JavaScript, которое проверит ширину и при необходимости увеличит ее. Но я думаю, что это просто неправильно.

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

И, пожалуйста, дайте мне знать, если вам нужна дополнительная информация, спасибо.

РЕДАКТИРОВАТЬ: мне нужно, чтобы он работал на IE6 (или, по крайней мере, на IE7, если IE6 не выглядит уродливо) и выше + во всех современных браузерах.

EDIT2: Вот пример, где вы можете видеть то, о чем я говорю: http://jsfiddle.net/wxrJU/6/. Если вы прокрутите вправо, вы увидите, что есть пустое пространство - рамка div не расширяется. Если бы кто-то мог предоставить решение, реализованное также в jsfiddle, я был бы признателен:).

Ответы [ 2 ]

0 голосов
/ 09 марта 2012

Я не проверял это в IE6 или 7, но он может двигаться в правильном направлении ...

http://jsfiddle.net/wxrJU/10/

0 голосов
/ 09 марта 2012

Понятно (sp?) Будет использовать CSS2 display: table; вместе с table-cell и, возможно, table-row значениями (IE8 +).

Если ваш верхний и нижний колонтитулы визуально недостаточно широки, когда содержимое очень широкое, вот несколько вариантов:

  • см. Технику, названную искусственными столбцами , и примените ее для создания искусственных строк (извините за нео-неологизм :)).
    Поскольку ваш контент может иметь любую высоту (в отличие от фиксированной ширины в столбце faux), вам придется применять мульти-фоны: один позиционируется как left top для заголовка, а другой - как left bottom для нижнего колонтитула.
  • CSS3 background-size изменит размер фоновой картинки до желаемой ширины. IE9 + в соответствии с отличным сайтом http://caniuse.com, что составляет более двух третей браузеров (за исключением случаев, когда ваши пользователи используют много старых IE, как в администрации или в большой компании). См. SO polyfill background-size для IE8-

РЕДАКТИРОВАТЬ: забыл о параметрах макета CSS3.

Вместо display: table; вы также можете рассмотреть опции CSS3:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...