Fixed footer!

Статус
В этой теме нельзя размещать новые ответы.
H

Hezard

Писатель
Регистрация
26 Окт 2008
Сообщения
5
Реакции
0
Всем Добрый День, надеюсь на вашу помощь в таком вопросе:
Есть сайт на котором футер является пользовательским меню и он прижимается к окну браузера свойством position:fixed;
Все бы нечего, да только при ресайзинге браузера или если у пользователя не влезет страница (в ввиду разных дисплеев)то горизонтальный скролл работает только для всего тела документа, а вот сам футер теряет содержимое и не скролится...точней показывается только тот кусок который влез в браузер.
Как это можно побороть, уже облазил кучу блогов но решения не нашел
 
чет не понял фразы
а вот сам футер теряет содержимое и не скролится
Нажмите для раскрытия...
скриншот покажи хоть, в чем косяк
 
То есть, для примера, если ресайзить окно браузера, в ширину, то появляется горизонтальный скролл, который прокручивает только тело документа, а сам футер не прокручивается, чем меньше ширина окна, тем меньший кусок футера влезает
 
Ага, я тоже не понял, скриншот и желательно код.

traa написал(а):
То есть, для примера, если ресайзить окно браузера, в ширину, то появляется горизонтальный скролл, который прокручивает только тело документа, а сам футер не прокручивается, чем меньше ширина окна, тем меньший кусок футера влезает
Нажмите для раскрытия...
Ну дык position:fixed;, естественно футер не двигается.


Покажи скриншот!
 
Если ширина верстки страницы или футера шире, чем окно браузера, но при этом содержимое исчезает и не появляется горизонтальный скролл, ищи в стилях:
Код: 
overflow: hidden;
Если убрать свойство, то по умолчанию оно станет в auto и скролл будет появляться лишь когда оно надо. Можно поставить:
Код: 
overflow: scroll;
Тогда скролл будет всегда, даже когда он не нужен.
 
Совершенно верно, можно поставить оверфлоу в авто и получить отдельный скролл для футера, но это выглядит поистине ужасающе, когда при ресайзе окна мы получаем два скролла, один для тела документа, а второй для футера.
Тут варианты: убирать один из скроллов и при скролле второго как-то скроллить первый(или наоборот, при скролле элемента скроллить боди), либо...
 
Так выглядит на обычном дисплее 15"
Для просмотра ссылки Войди или Зарегистрируйся
Так выглядит если изменить ширину окна браузера(допустим нетбук или кпк), уже часть меню футера обрезана
Для просмотра ссылки Войди или Зарегистрируйся
И вот скролл всего 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>test</title>
<!-- Styles -->
<link href="wp-content/css/style.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" 
            src="/path/to/firebug/firebug.js"></script>
</head>
<body>
<!-- Content -->
<div id="content_wrap">
	<div id="content" style="margin-top:40px;">	
	  <div id="about">
		<div class="about-round-top">
        	    <div class="about-text"></div>
		</div>
	  </div>
		<div class="post-round-bottom">&nbsp;</div>
  	</div>
</div>
<!-- [END] Content -->
<!-- Footer -->
<div id="footer_wrap">
	<div id="footer" >
		<div valign="top" style="height:100%;width:540px;float:left;">	
			<ul>
				<li style="display:inline;width:40px;">Logo</li>
				<li style="display:inline;width:100px;line-height:30px;margin-left:40px;"><input type="text" style="height:20px;width:100px;border:1px solid #749E58;color:#909090;" value="Логин" onclick="if (this.value=='Логин')this.value=''" onblur="if (this.value=='')this.value='Логин'"></li>
				<li style="display:inline;width:100px;line-height:30px;margin-left:20px;"><input type="password" style="display:inline;height:20px;width:100px;border:1px solid #749E58;color:#909090;" value="Пароль" onclick="if (this.value=='Пароль')this.value=''" onblur="if (this.value=='')this.value='Пароль'"></li>
				<li style="display:inline;width:100px;line-height:30px;margin-left:20px;"><div class="follow" style="display:inline-block;"><a style="" title="Follow Us" rel="external" href="../twitter.com/envato">Вход</a></div></li>
				<li style="display:inline;width:100px;line-height:30px;"><a href="/">Регистрация</a></li>
			</ul>
		</div>
		<div style="float:left;position:relative;">
			<div class="market_wrap">
				<div class="market_header" align="center" style="font-weight:bold;color:#ded9d9;">Общак</div>
					<ul class="up">
						<li><a href="">1</a></li>
						<li><a href="">2</a></li>
						<li><a href="">3</a></li>
					</ul>
			</div>
			<div class="sites_wrap">
				<div class="sites_header">Menu2</div>
				<ul class="up">
					<li><a href="">1</a></li>
					<li><a href="">2</a></li>
					<li><a href="">3</a></li>
			        </ul>
			</div>
		</div>	
		<div style="clear:both;"></div>
	</div>
</div>
<!-- [END] Footer -->
</body>
</html>
CSS для футера главного блока
HTML: 
#footer_wrap {
  position: fixed;
  bottom: 0;
  height: 47px;
  width: 100%;
  background: #1b1b1b url(images/footer-bg.jpg) no-repeat 0 0;
  border-top: 1px solid #749e58;
  z-index: 99;
}
#footer {
position:relative;
  margin:10px;
  min-width: 1000px;
}
 
Почему бы не попробовать
Код: 
#footer {
position:relative;
  margin:10px;
  width: 100%;
}
 
saneksanek написал(а):
Почему бы не попробовать
Код: 
#footer {
position:relative;
  margin:10px;
  width: 100%;
}
Нажмите для раскрытия...

Это одно из первых что пришло в голову, только не работает.
Вариантов перебрал множество...даже с яваскриптом решение пока не нашлось
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху