Альтернатива кадрам с CSS?

Question

Я ищу способ достижения макета с помощью CSS или любого другого метода, который может вместить дизайн и реализацию.

«Верхняя часть» - это фиксированная площадь. «Левая» область будет представлять собой список текстовых ссылок, предназначенных для «основной» области. Чтобы быть более конкретным, список ссылок на профили будет находиться в «левой» области, и я хочу, чтобы связанный профиль показывался в «основной» области.

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

Answer 1

Да ... вы можете использовать функцию jquery и load(), поскольку я полагаю, что вы используете только HTML, а не скрипты.

Answer 2

Вы можете сделать это, установив некоторые из ваших элементов как position: fixed; в CSS. Например, сделайте div для вершины и div для вашей боковой панели, установите для position: fixed; в CSS. Ваша основная область div - это просто нормальный div, который будет прокручиваться с нормальным телом.

Это очень просто и работает на всех основных браузерах (за исключением некоторых мобильных браузеров, я думаю).

Нет необходимости в jQuery или Javascript. Вы можете использовать такие вещи, как PHP, для своей основной области.

Update Вы можете также сделать DIVs с фиксированными размерами и добавить атрибут overflow: scroll; чтобы получить аналогичный результат.

Answer 3

Вам не нужны фреймы, и вам не нужна перезагрузка или AJAX, если вам не нравится. Поместите весь HTML на одну страницу. Поместите голову, бок и содержимое в разные контейнеры div. Используйте стиль.display = "none" или style.display = "", чтобы указать, какая ссылка с левой стороны открывается, div в области содержимого ...

В качестве альтернативы вы можете получить содержимое профилей с помощью AJAX.

Я не знаю, если этот ответ достаточно для вас, потому что я не знаю о вашем знании JavaScript.

Answer 4

Взгляните на этом блоге Стив Сандерсон:

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/