Проблема с "подвалом" (footer)

SCHNITZER · November 12, 2010

Проблема вот в чем.

Есть на сайте контент, под ним полоса height:50px;. Если контент не на всю страницу, то он все равно будет внизу страницы. Если контента много, то он окажется после него, и будет скролится.

Пример такой http://vk.osvita.org.ua/footer.htm

Все понятно. Но. Как я понимаю, задавая элементам body, html {height:100%}, мы задаем главным элементам размер.

Теперь. Посмотреть описание CSS width "Если родитель явно не указан, то в качестве процентной записи выступает окно браузера."

Т.е. задавая размер этого footer 100%, он будет не на весь экран, а на 100% видимой области, что заметно, если уменьшить размер окна браузера меньше, чем элемент на странице. Появляется скролл, и 100% ширина становится шириной окна и обрывается.

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

А вопрос в том, как это пофиксить. Попробовал множесто приемов на скрипте и jQuery. Как я понял, они делают то же самое, проблема не уходит.

Что делать? Или можно как-то побороть css?

psywalker · November 12, 2010

А я не понял, что ты хочешь получить?

А потом приведи скриншот того, что хочешь получить с объяснениями.

SCHNITZER · November 12, 2010

Да ладно лукавить

http://html-test.1gb.ru/008/podval.html

Вот. Уменьши окно браузера, и посмотри как footer будет выглядеть. известная проблема. Только вот решения пока не нашел.

roma · November 12, 2010

http://csstemplater.com/ вот здесь генератор шаблонов там такой проблеммы не было замечено)

SCHNITZER · November 12, 2010

Рома, теска, как же ж ты так... Там все тоже самое. Задают параметры высоты html и body, и 100% ширины становится понятием относительным.

roma · November 12, 2010

Я чего то видимо не так понял, тебе не нравится что футер вверх подскакивает когда появляется горизонтальная полоса прокрутки?

SCHNITZER · November 12, 2010

УУУУУУУУГГГГГГГГГГГРРРРРРРРРРРРРРР

Гхм.

Нет. Мне не нравится, что если окно уже центрального элемента, то при горизонтальном скроле ширина footer будет с ширину окна, а далее будет прерываться.

Центральная часть - 1000px, окно браузера 800px (ну не знаю, открыли боковую панель с закладками). Footer, имеющий ширину 100%, будет шириной 800px, а на 200px горизонтального скрола будет дырка.

roma · November 12, 2010

УУУУУУУУГГГГГГГГГГГРРРРРРРРРРРРРРР
Гхм.
Нет. Мне не нравится, что если окно уже центрального элемента, то при горизонтальном скроле ширина footer будет с ширину окна, а далее будет прерываться.
Центральная часть - 1000px, окно браузера 800px (ну не знаю, открыли боковую панель с закладками). Footer, имеющий ширину 100%, будет шириной 800px, а на 200px горизонтального скрола будет дырка.

дак можно футеру min-width:1000px поставить а для експлоера width: expression((documentElement.clientWidth||document.body.clientWidth)<1000?'1000px':'');

так и сделано в тех шаблонах ссылку на которые я давал.

Вот посмотри у меня нет такой проблемы http://nowozhilov-belmont.narod.ru/

psywalker · November 12, 2010

SCHNITZER

Смотри дружище, вот тебе два варианта. Или третий вариант - делай подвал #foot { position: fixed;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Поиск по символам</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	html,body { height: 100%; min-width: 800px;}
	#wrap { min-height: 100%; position: relative; overflow: hidden; }
	* html #wrap { height: 100%; zoom:1; overflow: visible;}
	#foot { position: absolute; bottom: 0; left: 0; width: 100%; background: red; height: 200px;}
	#basis { background: blue; margin-bottom: 220px;}
</style>
</head>

<body>

<div id="wrap">
	<div id="basis">
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>
	</div>
	<div id="foot">
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
	</div>
</div> 


</body>
</html>

А вот кстати вариант такой же как и у тебя. И всё отлично работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Поиск по символам</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	html,body { height: 100%; min-width: 800px;}
	#wrap { margin: 0 auto; min-height: 100%; width: 800px; overflow: hidden; }
	* html #wrap { height: 100%; zoom:1; overflow: visible;}
	#foot { margin: -200px 0 0;background: red; height: 200px;}
	#basis { background: blue; margin-bottom: 220px;}
</style>
</head>

<body>

<div id="wrap">
	<div id="basis">
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.

</p>
	</div>

</div> 
		<div id="foot">
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
		<p>	*   - фиксированная ширина контента 760px по центру;
	*  - шапка 180px в высоту;
	*  - вспомогательная колонка 180px в ширину, минимальная высота 250px;
	*  - основная полоса 580px в ширину, минимальная высота 250px;
	*  - подвал 40px в высоту, всегда прижат к низу экрана.
</p>
	</div>

</body>
</html>

SCHNITZER · November 13, 2010

Такой же, да не такой.

Первый вариант вполне подходит! Все нормально.

А вообще я на большом количестве сайтов видел этот баг. Решается, оказывается, просто.

Уважаемые модераторы, тема не там где надо, давайте вы ее удалите просто, дабы не захламлять форум...

psywalker - Спасибо тебе большое, ты созидаешь счастье! )

Great Rash · November 13, 2010

Ну удалять точно не стоит, мало ил кому она полезной окажется, а вот перенести в верстку необходимо, это да...

Sign In

Проблема с "подвалом" (footer)

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information