Domů › Stejná výška prvků

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.js a jquery.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