Альтернатива фреймам с CSS?

Question

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

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

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

Answer 1

Посмотрите на это сообщение в блоге Стива Сандерсона:

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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