Ищем пример CSS или объяснение макета ниже

Question

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

На странице должно быть 3 полосы или блока:

заголовок, низ и содержимое.

«Заголовок» должен начинаться слева 0, сверху 0 на видимом экране, проходить до правого края и иметь высоту 70 пикселей.

«Нижняя» полоса будет начинаться слева от 0, но в нижней части видимого экрана, а также иметь высоту 70px (например, начинаться у нижней части видимого экрана минус 70px). Он будет простираться до правого края видимого экрана.

Полоса 'content' начинается с левого 0, верхняя часть начинается с нижней части полосы 'header', а нижняя часть блока контента простирается вниз до верхней части полосы 'bottom'.

Было бы также хорошо, если бы полосы 'header' и 'bottom' были зафиксированы на своих местах, но блок 'content' можно было прокручивать, если в блоке было больше содержимого, чем пространство.

Я думаю, что это выполнимо, но я могу получить это пока только на моем текущем уровне, поэтому я хотел бы посмотреть, как эксперт сделает это.

Большое спасибо Майк Томас

Answer 1

Фиксированные заголовки внизу страниц сложно реализовать и поддерживать. Можете ли вы гарантировать, что ваш контент всегда будет соответствовать? Прокрутка всего блока вместо всей страницы может быть утомительной для пользователей, потому что вы должны сосредоточиться прямо перед использованием Page-Up и Page-Down.

Лучшим решением было бы оставить нижний колонтитул естественным образом после завершения содержимого. Вы можете установить минимальную высоту содержимого для страниц с большим количеством содержимого.

Извините, но не реальный ответ, но ваш сайт будет лучше.

Answer 2

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

http://www.cssplay.co.uk/layouts/basics2.html

Answer 3

То, что вы хотите, это липкий нижний колонтитул . Что касается содержимого, вам нужно реализовать прокручиваемый DIV - ключ, который там обрабатывает переполнение.

Answer 4

вот замечательный сайт, с которым я сталкивался по поводу css

Советы и учебные пособия по CSS

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

Answer 5

Blueprint CSS - хороший инструмент, упрощающий создание макетов CSS.

Answer 6

Примеры - Свойства списка Css / Примеры - Свойства / Примеры слоя Css - Свойства / примеры Css TextBox - Свойства шрифта Css / Примеры - Свойства текста Css / Примеры - Свойства курсора Css / Примеры - Свойства фона Css / Примеры - Свойства таблицы Css / Примеры - Полоса прокрутки Css Свойства / Примеры - Инструменты - Единицы - Параметры - Страница шаблона - Веб-дизайн

http://www.css -lessons.ucoz.com /

Answer 7

CSS-фреймы

В этом примере охватывает верхние и нижние колонтитулы, которые остаются фиксированными сверху и снизу, хотя ширина составляет менее 100%. Я уверен, что вы можете настроить.

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