Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.08.2011, 21:42
Интересующийся
Отправить личное сообщение для AnToxa Посмотреть профиль Найти все сообщения от AnToxa
 
Регистрация: 30.08.2011
Сообщений: 17

Растянуть элемент по содержимому
Приветствую! Скачал я шаблон для Joomla и вот какая проблема:
При отображении контента в mainbody его закрывает footer. Вот пример:

Ну т.е. контент еще не закончился а на него сверху лег футер.
Вот что мне в общем пишет FireBug:
Код:
<div id="mega_hmainbody" class="mega_mainbody" style="height: 558px; width: 1007px">
<div id="mega_hfooter" class="mega_footer" style="height: 558px; top: 558px; width: 1007px">
Т.е. высота у них фиксированная. Пытался подправить CSS, но ничего не вышло, так как высота шаблона устанавливается JS скриптом.
У меня вопрос, что сделать чтобы footer наконец таки съехал вниз? И не просто съехал на определенное расстояние (до этого я дошел своим, так сказать умом), а съезжал каждый раз по разному (по содержимому) т.е. фиксировался сразу после того как заканчивается содержимое...
Прошу помочь!
Ответить с цитированием
  #2 (permalink)  
Старый 30.08.2011, 21:42
Интересующийся
Отправить личное сообщение для AnToxa Посмотреть профиль Найти все сообщения от AnToxa
 
Регистрация: 30.08.2011
Сообщений: 17

Вот JS файл с настройками высоты шаблона:
function equalSize(){
	//get Height of page
	var winW = 0, winH = 0;
	if (document.body && document.body.offsetWidth){
		winW = document.body.offsetWidth;
		winH = document.body.offsetHeight;
	}
	if (document.compatMode=='CSS1Compat' &&
		document.documentElement &&
		document.documentElement.offsetWidth ) {
			winW = document.documentElement.offsetWidth;
			winH = document.documentElement.offsetHeight;
	}
	if (window.innerWidth && window.innerHeight) {
		winW = window.innerWidth;
		winH = window.innerHeight;
	}
	
	//...
	var wbody = document.getElementById('mega_body').offsetWidth - 17 ; 
	document.getElementById('mega_wwrapper').style.width = wbody + 'px';
	
	if(document.getElementById('mega_hbanner') != null){
		document.getElement('.mega_banner_w').style.width = wbody -460 + 'px';
	}
	if(document.getElementById('mega_extend1_w') != null){
		document.getElementById('mega_extend1_w').style.width = wbody -460 + 'px';
	}
	if(document.getElementById('mega_extend2_w') != null){
		document.getElementById('mega_extend2_w').style.width = wbody -460 + 'px';
	}
	document.getElement('.mega_mainbody_w').style.width = wbody -460 + 'px';
	document.getElement('.mega_footer_w').style.width = wbody -460 + 'px';
	
	if((document.getElementById('mega_hbanner') != null) && (document.getElementById('mega_hextend1') != null) && (document.getElementById('mega_hextend2') != null)){
		//Extend1
		document.getElementById('mega_hextend1').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend1').style.top = winH + 80 + 'px';
		
		//Extend2
		document.getElementById('mega_hextend2').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend2').style.top = winH*2 + 160 + 'px';
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH*3 + 240 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*4 + 320 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		//Set width
		document.getElementById('mega_hextend1').style.width = wbody + 'px';
		document.getElementById('mega_hextend2').style.width = wbody + 'px';
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*5 + 320 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') != null) && (document.getElementById('mega_hextend1') != null) && (document.getElementById('mega_hextend2') == null)){
		
		//Extend1
		document.getElementById('mega_hextend1').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend1').style.top = winH + 80 + 'px';
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH*2 + 160 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*3 + 240 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hextend1').style.width = wbody + 'px';
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*4 + 240 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') != null) && (document.getElementById('mega_hextend1') == null) && (document.getElementById('mega_hextend2') != null)){
		//Extend2
		document.getElementById('mega_hextend2').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend2').style.top = winH + 80 + 'px';
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH*2 + 160 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*3 + 240 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hextend2').style.width = wbody + 'px';
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*4 + 240 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') != null) && (document.getElementById('mega_hextend1') == null) && (document.getElementById('mega_hextend2') == null)){
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH + 80 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*2 + 160 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*3 + 160 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') == null) && (document.getElementById('mega_hextend1') != null) && (document.getElementById('mega_hextend2') != null)){
		//Extend2
		document.getElementById('mega_hextend2').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend2').style.top = winH + 80 + 'px';
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH*2 + 160 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*3 + 240 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		//Set width
		document.getElementById('mega_hextend1').style.width = wbody + 'px';
		document.getElementById('mega_hextend2').style.width = wbody + 'px';
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*4+ 240 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') == null) && (document.getElementById('mega_hextend1') == null) && (document.getElementById('mega_hextend2') != null)){
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH + 80 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*2 + 160 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*2 + 160 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') == null) && (document.getElementById('mega_hextend1') != null) && (document.getElementById('mega_hextend2') == null)){
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH + 80 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*2 + 160 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*2 + 160 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') == null) && (document.getElementById('mega_hextend1') == null) && (document.getElementById('mega_hextend2') == null)){
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH + 80 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*2 + 80 + 73 + 'px';
	}
}
window.addEvent ('load', function() {
	equalSize();
});

Последний раз редактировалось AnToxa, 30.08.2011 в 21:46.
Ответить с цитированием
  #3 (permalink)  
Старый 30.08.2011, 21:52
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от AnToxa
Вот JS файл с настройками высоты шаблона:
Сделайте мои глаза не видеть это.
Ответить с цитированием
  #4 (permalink)  
Старый 31.08.2011, 00:31
Кандидат Javascript-наук
Отправить личное сообщение для abc_ua Посмотреть профиль Найти все сообщения от abc_ua
 
Регистрация: 20.05.2010
Сообщений: 105

это ппц, вы думаете кто-то будет читать 200 строк кода? Покажите все стили для этих блоков.
Ответить с цитированием
  #5 (permalink)  
Старый 31.08.2011, 00:45
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Ужас.
Ответить с цитированием
  #6 (permalink)  
Старый 31.08.2011, 08:08
Интересующийся
Отправить личное сообщение для AnToxa Посмотреть профиль Найти все сообщения от AnToxa
 
Регистрация: 30.08.2011
Сообщений: 17

Вот стили, для блоков.
#mega_hbanner,
#mega_hextend1,
#mega_hextend2,
#mega_hmainbody,
#mega_hfooter{
	position: absolute;
	left: 0;

.mega_wrapper_i,
.mega_banner,
.mega_extend1,
.mega_extend2,
.mega_tops_extend,
.mega_mainbody,
.mega_footer{
	width: 100%;
	float: left;
	
}
Ответить с цитированием
  #7 (permalink)  
Старый 31.08.2011, 09:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,741

AnToxa, от "наездов" футера на контент можно "защититься" например так

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
#container {
	position: relative;
	width: 90%;
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: silver;
}
#footer,
#footer_tab {
	height: 100px;
}
#footer_tab {
	clear: both;
}
#footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: orange;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div id='content'>content</div>
	<div id='footer_tab'></div>
	<div id='footer'>footer</div>
</div>
</body>
</html>


И не нужно никакое вычисление высоты контента скриптом...
Ответить с цитированием
  #8 (permalink)  
Старый 31.08.2011, 11:02
Интересующийся
Отправить личное сообщение для AnToxa Посмотреть профиль Найти все сообщения от AnToxa
 
Регистрация: 30.08.2011
Сообщений: 17

ksa, не могу реализовать, т.к. в index.php блоки вызываются так:
<?php } ?>
			<div id="mega_hmainbody" class="mega_mainbody">
				<div class="mega_mainbody_w">
					<div class="mega_mainbody_i">
						<div id="mega_fpage" class="mega_frontpage">
							<div class="mega_frontpage_i">
								<jdoc:include type="component" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="mega_hfooter" class="mega_footer">
				<div class="mega_footer_border_top">
					<div class="mega_footer_w">
						<div class="mega_footer_i">
							<jdoc:include type="modules" name="bottom" style="xhtml" />
						</div>
					</div>
				</div>
			</div>
Ответить с цитированием
  #9 (permalink)  
Старый 01.09.2011, 09:07
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,741

Сообщение от AnToxa
в index.php блоки вызываются так
Что мешает добавить дивов?
Ответить с цитированием
  #10 (permalink)  
Старый 01.09.2011, 10:36
Интересующийся
Отправить личное сообщение для AnToxa Посмотреть профиль Найти все сообщения от AnToxa
 
Регистрация: 30.08.2011
Сообщений: 17

ksa, не могу понять куда.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Drag-n-Drop - перетянуть элемент Jugo ExtJS 1 10.08.2011 19:10
Как передать элемент в переменную из функции kichSman jQuery 3 12.07.2011 22:16
перенести элемент в другой контейнер debugx jQuery 2 02.06.2011 15:53
Как растянуть элемент rawuk Элементы интерфейса 4 28.03.2011 23:44
Кодировка при использовании Ajax Nichloas AJAX и COMET 9 17.09.2009 16:06