Прижал footer к низу, а теперь при избытки текста он на месте стоит...

12
D
На сайте с 21.08.2009
Offline
48
2107

Добрый день!

Подскажите пожалуйста, как победить данную проблему - если текста много на экране, то футер не перемещается вниз, а остается:

[ATTACH]90872[/ATTACH]

<body>

<!--выравниваем по центру-->
<div id="vse">
<!--все кроме подвала для задания высоты-->
<div id="vsekromefoter">
<!--верхнее меню-->
<div id="topmenu">верхнее меню</div>
<!--верхний рисунок-->
<div id="top">верхний рисунок</div>
<!--три центральные колонки-->
<div id="central">
<!--левое меню-->
<div id="levoe">левое меню</div>
<!--контент-->
<div id="kontent">контент</div>
<!--правое меню-->
<div id="pravoe">правое меню</div>
</div>
</div>
<!--подвал-->
<div id="footer">подвал (низ)</div>
</div>

* {

margin: 0;
padding: 0;
}
html {
height: 100%;
}
body{
background-color: #CC00FF;
height:100%;
}
#vse{
width: 1000px;
margin-right: auto;
margin-left: auto;
height:100%;
background-color: #669900;
}
#vsekromefoter{
min-height:100%;
margin-bottom: -50px;
}
#topmenu{
margin: 0px;
padding: 0px;
height: 50px;
width: 1000px;
background-color: #33CC99;
background-position: center;
}
#top{
background-color: #003399;
margin: 0px;
padding: 0px;
height: 200px;
width: 1000px;
}
#central{
background-color: #996600;
margin: 0px;
padding: 0px;
min-height:100%;
width: 1000px;
}
#levoe{
background-color: #009900;
margin: 0px;
padding: 0px;
width: 200px;
float: left;
}
#kontent{
background-color: #CCCCFF;
width: 600px;
margin: 0px;
padding: 0px;
float: left;
}
#pravoe{
background-color: #33FF00;
width: 200px;
float: right;
}#footer{
background-color: #FFFF00;
height: 50px;
width: 1000px;
margin-bottom: -50px;
}

В инете нашел кучу способов, пробую, но что то не получается - чувствую что толкусь на месте...

Подскажите пожалуйста, в чем моя ошибка?

jpg 1.jpg
DiAksID
На сайте с 02.08.2008
Offline
236
#1

1 в #vse height:100%; заменить на min-height:100%; добавить position:reletive;

2 последнему блоку перед футером задать margin снизу на высоту футера...

3 #footer сделать position:absolute; и задать bottom:0;

ЗЫ: в примерах есть ВСЁ, лень думать?...

show must go on !!!...
palladin_jedi
На сайте с 13.07.2010
Offline
71
#2
DiAksID:
добавить position:reletive;

position:relative; А то ТС еще долго будет искать ошибку :)

ТС, читай http://htmlbook.ru

Там много хорошего по теме написано, да еще и с примерами.

Сайт о web-разработке и прочем (http://seazo.net)||Продвижение статьями под Google (http://short.seazo.net/ght4zf) Бесплатные консультации рефералам Sape (http://www.sape.ru/r.SWfwWOblBo.php) PHP и JS скрипты на заказ, создание сайтов с нуля и на CMS.
DiAksID
На сайте с 02.08.2008
Offline
236
#3
palladin_jedi:
position:relative; А то ТС еще долго будет искать ошибку ...

точнА 😂

B
На сайте с 12.01.2010
Offline
15
#4

Для генерации каркаса под верстку могу вот такой сервис посоветовать http://csstemplater.com/.

Очень выручал поначалу

D
На сайте с 21.08.2009
Offline
48
#5
DiAksID:
1 в #vse height:100%; заменить на min-height:100%; добавить position:reletive;

2 последнему блоку перед футером задать margin снизу на высоту футера...

3 #footer сделать position:absolute; и задать bottom:0;

ЗЫ: в примерах есть ВСЁ, лень думать?...

Вот исправил как вы советовали....

Да вот результат тот же...

А если текста мало (или вообще нет), то он и так нормально показывал:

[ATTACH]90878[/ATTACH]

Вот таблица стилей:

* {

margin: 0;
padding: 0;
}
html {
height: 100%;
}
body{
background-color: #CC00FF;
height:100%;
}
#vse{
width: 1000px;
margin-right: auto;
margin-left: auto;
min-height:100%;
position:relative;
background-color: #669900;
}
#vsekromefoter{
min-height:100%;
margin-bottom: -50px;
}
#topmenu{
margin: 0px;
padding: 0px;
height: 50px;
width: 1000px;
background-color: #33CC99;
background-position: center;
}
#top{
background-color: #003399;
margin: 0px;
padding: 0px;
height: 200px;
width: 1000px;
}
#central{
background-color: #996600;
margin: 0px;
padding: 0px;
min-height:100%;
width: 1000px;
}
#levoe{
background-color: #009900;
margin: 0px;
padding: 0px;
width: 200px;
float: left;
}
#kontent{
background-color: #CCCCFF;
width: 600px;
margin: 0px;
padding: 0px;
float: left;
}
#pravoe{
background-color: #33FF00;
width: 200px;
float: right;
}#footer{
background-color: #FFFF00;
height: 50px;
width: 1000px;
position:absolute;
bottom:0;
}

ПОМОГИТЕ ПОЖАЛУЙСТА!!!

jpg 3.jpg
DiAksID
На сайте с 02.08.2008
Offline
236
#6
dedos:
... ПОМОГИТЕ ПОЖАЛУЙСТА!!!

ааа, блин, там же flat-ы стоят 😂 ну так всё просто, для #vse добавьте overflow:auto; что бы он охватывал float блоки внутри себя...

D
На сайте с 21.08.2009
Offline
48
#7
DiAksID:
ааа, блин, там же flat-ы стоят 😂 ну так всё просто, для #vse добавьте overflow:auto; что бы он охватывал float блоки внутри себя...

Спасибо!

Заработало...

Вот только я заметил маленький косячок:

[ATTACH]90880[/ATTACH]

То есть футер наезжает на текст, как бы становиться сверху его...

jpg 4.jpg
DiAksID
На сайте с 02.08.2008
Offline
236
#8
dedos:
... То есть футер наезжает на текст, как бы становиться сверху его...

елы палы 😂 писал уже: margin-bottom последнему блоку перед футером влепить, и много других вариантов.

D
На сайте с 21.08.2009
Offline
48
#9

Спасибо!

Все заработало...

Вот только в самом низу отыскалась небольшая проблема при просмотре сайта в Opera 11.11 :

[ATTACH]91380[/ATTACH]

Вроде бы в других во всех браузерах нормально прижимает (к самому низу), а вот в опере почему то не прижимает и сбоку появляется полоса прокрутки....

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

jpg 1.jpg
O
На сайте с 29.05.2008
Offline
195
#10

О Боги, насоветовали, а потом говорят, что такой код либо школьник писал, либо в 1998 году делали. Флоаты :D. display: inline-block, не? И никаких сбросов не надо. Да и сброс лучше делать <br clear="all"> или <br class="clear">.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий