Растянуть элемент по содержимому
Приветствую! Скачал я шаблон для Joomla и вот какая проблема:
При отображении контента в mainbody его закрывает footer. Вот пример: Ну т.е. контент еще не закончился а на него сверху лег футер. Вот что мне в общем пишет FireBug: Код:
<div id="mega_hmainbody" class="mega_mainbody" style="height: 558px; width: 1007px"> У меня вопрос, что сделать чтобы footer наконец таки съехал вниз? И не просто съехал на определенное расстояние (до этого я дошел своим, так сказать умом), а съезжал каждый раз по разному (по содержимому) т.е. фиксировался сразу после того как заканчивается содержимое... Прошу помочь! |
Вот 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(); }); |
Цитата:
|
это ппц, вы думаете кто-то будет читать 200 строк кода? Покажите все стили для этих блоков.
|
Ужас.
|
Вот стили, для блоков.
#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; } |
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> И не нужно никакое вычисление высоты контента скриптом... |
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> |
Цитата:
|
ksa, не могу понять куда. :(
|
Часовой пояс GMT +3, время: 20:56. |