11548 sujets

JavaScript, DOM et API Web HTML5

[Resolu] Hauteur de page avec Jquery

Bonjour,

Alors voilà, je fais un site où tous mes éléments ou presque sont positionnés en absolu (contrainte de design un peu spéciale où il faut que je ferre les éléments par le bas de la page...)

J'ai à peu près cette architecture html :


<body>

	<div id="container">
        
           <div id="content" class="clearfix">
				
	   </div>
        
      </div>

      <div id="site_info"></div><!-- footer -->

</body>


avec le css suivant :



body, html { height:100%; width:100%; }
body { 
	background:#fff; 
	color:#636363; 
	font:11px/16px "Trebuchet MS", "Myriad Pro", Helvetica, sans-serif; 
	margin:0; 
	padding:0;
	position:relative;
	text-align:center; 
}


#container { height:100%; margin:0 auto; padding:0; position:relative; text-align:left; width:980px; z-index:6; } /* conteneur de page */
body > #container { height:auto; min-height:100%; }


#content { bottom:130px; margin:0; position:absolute; right:0; width:660px; z-index:6;  /* contenu */ }

#site_info {  /* ours du site - footer */
	background:#fff;
	bottom:0;
	height:101px;
	left:0;
	margin:0;
	position:absolute; 
	text-align:center; 
	width:100%; 
	z-index:1000; 
}


et en jQuery, je pensais faire quelque chose comme ça mais là c'est beaucoup moins ma tasse de thé (mais j'y travaille...) :


	$(document).ready(function(){

		recalculatePageHeight();
		jQuery(window).resize(recalculatePageHeight);
		 
	});

function  recalculatePageHeight() {

	var _content = jQuery("#content").height();
	var _window = jQuery(window).height();
	var _container = jQuery("#container").height();
	var _totalPage = _content + 130;

	if (_window > _totalPage)
	{
		var _newHeight = _content + 130;
		jQuery("#container").css("height", _newHeight);
	}
}


mais bon ça fonctionne pas....

si vous avez des indices, ce serait génial !!

merci d'avance pour vos lumières,

KePh
Modifié par kephren (01 Oct 2009 - 21:41)
J'ai essayé ça mais sans succès non plus (la barre de scroll n'apparait pas sur la fenêtre et j'ai des éléments qui sortent de la fenêtre que je ne peux du coup pas atteindre) :



		recalculatePageHeight();
		jQuery(window).resize(recalculatePageHeight);


		function recalculatePageHeight() {
		
			var _content = jQuery("#content").height();
			var _window = jQuery(window).height();
			var _document = jQuery(document).height();
			var _totalPage = 130 + _content;

			if (_window < _totalPage)
			{
				var _newHeight = _content + 130;
				jQuery(document).height(_newHeight);
			}
		}


		recalculatePageHeight();
		jQuery(window).resize(recalculatePageHeight);


		function recalculatePageHeight() {
		
			var _content = jQuery("#content").height();
			var _window = jQuery(window).height();
			var _document = jQuery(document).height();
			var _totalPage = 130 + _content; //130 c'est la hauteur fixe de #site_info, le pied de page

					

			if (_window < _totalPage)
			{
				var _newHeight = _content + 130;
				var _newBottomFooter = _window - _totalPage;
				jQuery(document).height(_newHeight);
				jQuery("#container").height(_newHeight);
				jQuery("#site_info").css("bottom",_newBottomFooter);

			}
		}


Smiley biggrin
Modifié par kephren (01 Oct 2009 - 21:43)
Sujet clos
Aller à