Как сделать так, чтобы нижний колонтитул класса CSS проходил слева направо на экране?
Мой нижний колонтитул CSS не раскрывает всю нижнюю часть страницы. Он работает правильно, если окно браузера достаточно мало, но если окно достаточно велико, то видны правая и левая сторона, а также фон страницы. Класс не вложен в другой класс, и его единственными родителями являются теги и. Вот CSS для нижнего колонтитула:
.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background-color:#d9d9d9;}
.Footer p { color:#959595; padding:0; margin:0; font:normal 10px 'Verdana';}
.Footer a { color:#959595; text-decoration:underline;}
Страница на сайте avidest.com, так что вы можете понять, что я имею в виду. Любая помощь будет оценена. Благодарю.
2 ответа
Решение
Переместить Footer
блок за пределами вашего основного контейнера, bgRasize
, и он должен охватывать ширину страницы. В настоящее время это 100% ширина контейнера.
<div class="bgRasize">
... other content
</div>
<div class="Footer">
... footer content
</div>
Проверьте три вещи:
.Footer
стихия является прямым ребенком вашего<body>
тег.<body>
должен иметьpadding: 0; margin: 0;
если вы хотите, чтобы ваш элемент касался краев области просмотра.- Если элемент с классом
.Footer
не является блочным элементом по умолчанию, вы должны явно установить его стиль отображенияdisplay: block;
,
Иерархия тегов должна выглядеть так:
<body>
<!-- Page content. -->
<div class="Footer"></div>
</body>