Jump to content
  • 0

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


SCHNITZER
 Share

Question

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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

Гхм.

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

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

Link to comment
Share on other sites

  • 0
УУУУУУУУГГГГГГГГГГГРРРРРРРРРРРРРРР

Гхм.

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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>

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy