Как создать столбцы CSS, вкл. прокручиваемый средний столбец и плавающие левый и правый столбцы - PullRequest
3 голосов
/ 25 марта 2011

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

В моем примере экрана вы найдете концепцию того, что я пытаюсьрешать.screen example

Я пытался найти эту проблему в stackoverflow и google, но я нашел только примеры, которые немного отличаются.

Кто знает, как решить эту проблему?

1 Ответ

1 голос
/ 25 марта 2011

пример в JSBin - (см. обновленную версию ниже, это глючит, фиксированные столбцы липкие)

  • зеленый не требуется, он там показать обертку на самом деле центрирование всего участка
  • абсолютно поместите левый и правый обертки во-первых, так position:fixed столбцы не переходят в область просмотра

Обновление

версия без ошибок теперь в JSBin

хм, это было сложнее, чем я думал; этот работает в IE7, 8, Safari, FF3.6, Opera, Chrome

просмотр исходного кода для заметок, особенно интересны события-указатели, без которых более новые браузеры не будут нажимать (выделять текст или щелкать ссылку) на «наложенный» div, то есть то, что делает этот макет, накладывая его Абсолютное позиционирование div и использование абсолютного позиционирования и относительного положения для обхода прокрутки по вертикали и горизонтали, проблемы, связанные с исчезновением содержимого и фиксированными фиксированными div

Обновлено для использования jQuery согласно комментариям

Пример: здесь

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