Pokud potřebujete zajistit na stránce stejnou výšku některých prvků (tj. zjistit maximální výšku a nastavit ji u všech ostatních) jistě se Vám bude hodit níže uvedené řešení.
... <meta http-equiv="content-script-type" content="text/javascript" /> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.equalHeights.js"></script> <script type="text/javascript" src="jquery.pxem.js"></script> <script type="text/javascript" src="jquery.settings.js"></script> </head> <body> ...
$(document).ready(function(){ // vyber selektoru $("#box1, #box2, .boxes ... etc.").equalHeights({ relative: true }); });
Další možnosti:
/* * Unify Heights * * <div id="container"> * <div id="sidebar"></div> * <div id="content"></div> * </div> * *//* $(function() { function unifyHeights() { var maxHeight = 0; $('#container').children('#sidebar, #content').each(function() { var height = $(this).outerHeight(); // alert(height); if (height > maxHeight) { maxHeight = height; } }); $('#sidebar, #content').css('height', maxHeight); } unifyHeights(); });
/* * iframe Auto Adjust Height as content changes * * <div id="main"> * <div id="navigation"></div> * <div id="content"> * <iframe></iframe> * </div> * </div> * * html, body, #main { * margin: 0; * padding: 0; * height: 100%; * } * */ $(function() { // Resize iFrame Height to Fit Content function ResizeIframe() { var mainHeight = $('#main').outerHeight(); var navHeight = $('#navigation').outerHeight(); var contenHeight = mainHeight - navHeight; $('iframe').css('height', contenHeight); } // Resize ResizeIframe(); // Try to change the iframe size every 2 seconds setInterval(function() { ResizeIframe(); }, 2000); });
Příloha | Velikost |
---|---|
equalheights.zip | 2.63 KB |