Stejná výška prvků

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í.

  1. Do stránky připojte jQuery knihovnu, skripty jquery.equalHeights.jsjquery.pxem.js (převod z px na em v em-based layoutech) skripty obsažené v arichvu eaualheights.zip.
      ...
      <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>
      ...
  2. Vytvořte soubor jquery.settings.js s níže uvedeným obsahem a upravte požadované selektory dle potřeb (skript se spustí automaticky po načtení celé stránky):
    $(document).ready(function(){
      // vyber selektoru
      $("#box1, #box2, .boxes ... etc.").equalHeights({ relative: true });  
    });

Další možnosti:

  • CSS Demo of Equal Height Columns - Full Cross-Browser CSS. No CSS Hacks. No Images. No JavaScript.
  • Unify Heights
  • /*
    * 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();
    });
  • Resize iFrame to Fit Content (Same Domain Only)
  • iframe Auto Adjust Height as content changes
  • /*
    * 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řílohaVelikost
equalheights.zip2.63 KB