Необходимо закрепить шапку и footer при масштабировании страницы в браузере

@chera_a · Регистрация: 24.04.2015

Студворк — интернет-сервис помощи студентам

Добрый день, нашла вашу тему, очень близка мне по тематике. Есть сайт tagansorbent.kz, на котором нужно закрепить шапку и footer при увеличении и уменьшении страницы в браузере.
на данный момент шапка уменьшается в высоту, но разъезжается в ширину, и низ необходимо закрепить в размере примерно 1200 px.
Прикрепленный файл - рисунок №1 - как отображается.
Установила новые параметры, выделено красным:

HTML5
1
2
<div id="top-area" #class="et-animation" style="background-color: #fff; background-image: url([url]http://tagansorbent.kz/wp-content/uploads/2015/12/baner3.jpg);[/url] margin: auto; vertical-align:top; min-width: 900px; max-width: 1400px;">
<div class="container clearfix">

изображение фиксируется по центру, но прикрепленный цвет фона (серый), при уменьшении страницы, сразу выходит с двух сторон от изображения, ставлю background-color: #fff; - но безрезультатно. Как установить под изображением белый фон.
Данный цвет дублируется в footer, и если я в панели управления меняю цвет, то низ становится тоже белым. А мне нужно что бы в шапке был белый цвет вокруг изображения, а в низу оставался серый фон.

И второе как зафиксировать цвет фона в низу страницы, что бы он был как обведено на рисунке №1 белой линией. Устанавливаю параметр width: 1200px; - но он как расширялся на всю ширину экрана, так и продолжает.

Заранее огромное спасибо за помощь.

@chera_a · 22.05.2016, 20:29 **[ТС]**

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

@mrtoxas · 22.05.2016, 21:00

Сообщение от chera_a

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

Что с этим серым фоном надо сделать? Надо сделать так?

@Fedor92 · 23.05.2016, 00:06

Комментарий модератора

chera_a, один вопрос - одна отдельная тема! Не надо задавать вопросы в чужих темах, тем более, что они давно потеряли актуальность!

@chera_a · 23.05.2016, 05:27 **[ТС]**

Хорошо, спасибо. Просто бывают форумы где наоборот ругаются, что создают кучу одинаковых тем.
Нужно что бы серого фона по краям от основной картинки не было. Когда уменьшаем до 50-30% страницу, сразу видно, что по центру картинка с белым кантом и по бокам серый фон.

@boilzzz · 23.05.2016, 07:45

а вы попробуйте убрать

CSS
1
max-width: 1400px;

и поэкспериментируйте

CSS
1
 background-position: 0px/%/vm   0px/%/vm;

@chera_a · 23.05.2016, 07:52 **[ТС]**

Эту функцию можно вообще убрать, результат остаётся тот же, я уже всяко пробовала. Там фиксированный bg, который закреплены под банером и в footere. Я могу поменять на белый, но тогда и в низу цвет меняется. А там мне нужен серый. Может попробовать установить в футере изображение нужного мне размера, тогда получится сменить цвет фона на белый.

@mrtoxas · 23.05.2016, 08:17

Попробуй обернуть хедер блоком, которому задать белый фон и 100% ширины.

@boilzzz · 23.05.2016, 08:22

У вас получается что в футоре, что там где картинка идет цвет от

CSS
1
2
3
body.custom-background {
    background-color: #EC0000;
}

Попробуйте добавить в футер background другой, и убрать из body класс custom-background

@mrtoxas · 23.05.2016, 08:26

Должна получиться такая структура:

HTML5
1
2
3
<div class="wrap-head">
    <div id="top-area"></div>
</div>

CSS
1
2
3
4
.wrap-head{
    background: #fff;
    width:100%;
}

У меня это сработало.

@Fedor92 · 23.05.2016, 10:28

Не по теме:

chera_a, как правило на форумах есть порядок размещения тем(пункт 4), если уделите 2-3 минутки своего драгоценного времени на ознакомление - это увеличит Ваши шансы на оперативное решение вопроса, позволит избежать путаницы и облегчит работу модераторам... Удачи в разработках! :)

@chera_a · 24.05.2016, 08:18 **[ТС]**

Fedor92 Спасибо

Добавлено через 1 минуту
Все вопрос решила, установила в footer-bg изображение и в bg изменила цвет заливки. Всем спасибо за помощь.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@chera_a 0 / 0 / 0 Регистрация: 24.04.2015 Сообщений: 7
	22.05.2016, 20:29 [ТС]
	На данный момент я закрепила картинку, вы можете посмотреть пройдя по адресу сайта, только по сторонам серый фон. 0

@chera_a 0 / 0 / 0 Регистрация: 24.04.2015 Сообщений: 7
	23.05.2016, 05:27 [ТС]
	Хорошо, спасибо. Просто бывают форумы где наоборот ругаются, что создают кучу одинаковых тем. Нужно что бы серого фона по краям от основной картинки не было. Когда уменьшаем до 50-30% страницу, сразу видно, что по центру картинка с белым кантом и по бокам серый фон. 0

@chera_a 0 / 0 / 0 Регистрация: 24.04.2015 Сообщений: 7
	23.05.2016, 07:52 [ТС]
	Эту функцию можно вообще убрать, результат остаётся тот же, я уже всяко пробовала. Там фиксированный bg, который закреплены под банером и в footere. Я могу поменять на белый, но тогда и в низу цвет меняется. А там мне нужен серый. Может попробовать установить в футере изображение нужного мне размера, тогда получится сменить цвет фона на белый. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.05.2016, 08:17
	Попробуй обернуть хедер блоком, которому задать белый фон и 100% ширины. 0

@Fedor92
	23.05.2016, 10:28
	Не по теме: chera_a, как правило на форумах есть порядок размещения тем(пункт 4), если уделите 2-3 минутки своего драгоценного времени на ознакомление - это увеличит Ваши шансы на оперативное решение вопроса, позволит избежать путаницы и облегчит работу модераторам... Удачи в разработках! :) 0

@chera_a 0 / 0 / 0 Регистрация: 24.04.2015 Сообщений: 7
	24.05.2016, 08:18 [ТС]
	Fedor92 Спасибо Добавлено через 1 минуту Все вопрос решила, установила в footer-bg изображение и в bg изменила цвет заливки. Всем спасибо за помощь. 0