cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Matching element heights</h1>
<p>Easily match up heights across a set of non-linear elements. Allows for multiple sets, with each set having a different height defined by an inline <code>min-height</code>.</p>
<p>For use where Flexbox is too cumbersome, or cannot be retro fitted.<br> Only applied above 460px (user defined) browser width in this example.</p>
<p>Note it's only the "yada yada &hellip;" container which is affected.</p>

<div class=container>
  <section class=txt_sctn>
    <a class=txt_lnk href="">
      <span class=img-1></span>
      <span class=txt_container>
        <em class=txt_title>Stuff title</em>
        <span class=txt_content data-matchHeights=A>yada yada yada</span>
        <span class=txt_cta><span class=cta>Get it</span></span>
      </span>
    </a>
  </section>
  <section class=txt_sctn>
    <a class=txt_lnk href="">
      <span class=img-2></span>
      <span class=txt_container>
        <em class=txt_title>Stuff title</em>
        <span class=txt_content data-matchHeights=A>yada yada yada yada yada yada yada yada yada yada yada yada</span>
        <span class=txt_cta><span class=cta>Get it now</span></span>
      </span>
    </a>
  </section>
  <section class=txt_sctn>
    <a class=txt_lnk href="">
      <span class=img-3></span>
      <span class=txt_container>
        <em class=txt_title>Stuff title</em>
        <span class=txt_content data-matchHeights=A>yada yada yada</span>
        <span class=txt_cta><span class=cta>Now get it</span></span>
      </span>
    </a>
  </section>
  <section class=txt_sctn>
    <a class=txt_lnk href="">
      <span class=img-4></span>
      <span class=txt_container>
        <em class=txt_title>Stuff title</em>
        <span class=txt_content data-matchHeights=A>yada yada yada yada yada yada</span>
        <span class=txt_cta><span class=cta>It now get</span></span>
      </span>
    </a>
  </section>
</div>

<h2>How?</h2>
<p>Add data attribute to the elements you wish to equalise and give it a value: <code>data-matchHeights="A"</code>.<br>Ensure the elements each have <code>display: block;</code> and <code>box-sizing: border-box</code>.<br>Then run the script.</p>
<p>All elements with the same data attribute value have the same min-height applied.<br> The min-height is equal to the tallest elements height and is recalculated when the browser width changes.</p>
<p>Proof the "equalised height" blocks do not have to be at all linear: <span class="txt_content solo" data-matchHeights=A>yada yada yada yada yada yada</span></p>
<p>Real life example: <a target=_blank title="[new window]" href="http://www.tesco.com/christmas/">Tesco Christmas 2016</a></p>

<p>Github repo: <a target=_blank title="[new window]" href="https://github.com/2kool2/matching-element-heights">Matching-element-heights</a></p>


<p class=smaller><a target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/public/?grid_type=list#">Pens by Mike Foskett</a> &mdash; <a target=_blank title="[new window]" href="https://websemantics.uk/">webSemantics</a></p>
            
          
!
            
              body {max-width:100%}
.container {
  display: flex;
}
.txt_sctn {
  width: calc(25% - 12px);
  margin-right: 16px;
  float: left;
  background-color: #000;
}
.txt_sctn:last-child {
  margin-right: 0;
}
.txt_lnk {
  display:block;
  border-bottom: 0 solid;
}

[class^="img"] {
  width: 100%;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  padding-bottom: 65.45%;
}
.img-1 {
  background-image: url(https://websemantics.uk/portfolio/christmas.2016/i/moments/s5.jpg);
}
.img-2 {
  background-image: url(https://websemantics.uk/portfolio/christmas.2016/i/moments/s6.jpg);
}
.img-3 {
  background-image: url(https://websemantics.uk/portfolio/christmas.2016/i/moments/s7.jpg);
}
.img-4 {
  background-image: url(https://websemantics.uk/portfolio/christmas.2016/i/moments/s8.jpg);
}
.txt_container {
  display: block;
  text-align: center;
  margin-top: .5rem;
}
.txt_title {
  display:block;
}
.txt_content {
  display:block;
  padding: .5rem;
  background-color: rgba(0,0,0,.25);
}
.txt_cta {
  display:block;
  padding: .5rem .25rem;
}
.cta {
  border: 1px solid #999;
  padding:.25rem .5rem;
}

.solo {
  width:25%;
  background-color: rgba(0,0,0,.5);
  padding:.5rem
    
}
            
          
!
            
              // Matching non-linear element heights - v1.0 - 18/12/2016 - M.J.Foskett - https://websemantics.uk/
var matchHeights = function () {

  "use strict";

  var dataAttr = "data-matchHeights";
  var minViewportWidth = 460;

  function _getHeightSetsArray(dataAttr) {
    // Return an array containing the different values of data-data-heightmatch
    var value;
    var arr = [];
    var sets = document.querySelectorAll("[" + dataAttr + "]");
    var i = sets.length;
    while (i--) {
      value = sets[i].getAttribute(dataAttr);
      if (arr.indexOf(value) === -1) {
        arr.push(value);
      }
    }
    return arr;
  }

  function _resetMinHeights(set) {
    // reset min-heights by removing the inline style.
    var i = set.length;
    while (i--) {
      set[i].removeAttribute("style");
    }
  }

  function _getMaxSetHeight(set) {
    // return the height of the tallest element in set
    var maxHeight = 0;
    var currentHeight;
    var i = set.length;
    while (i--) {
      currentHeight = set[i].clientHeight;
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    }
    return maxHeight;
  }

  function _setMinHeight(set, matchedHeight) {
    var i = set.length;

    while (i--) {
      set[i].style.minHeight = matchedHeight + "px";
    }
  }

  function init() {

    var sets = _getHeightSetsArray(dataAttr);
    var i = sets.length;
    var set;

    while (i--) {

      set = document.querySelectorAll("[" + dataAttr + "=\"" + sets[i] + "\"]");

      _resetMinHeights(set);

      // Only above minimum screen width
      if (document.body.clientWidth >= minViewportWidth) {

        _setMinHeight(set, _getMaxSetHeight(set));

      }
    }
  }

  init();

};


// https://john-dugan.com/javascript-debounce/
// https://codepen.io/johndugan/pen/BNwBWL?editors=001
var debounce=function(e,t,n){var a;return function(){var r=this,i=arguments,o=function(){a=null,n||e.apply(r,i)},s=n&&!a;clearTimeout(a),a=setTimeout(o,t||200),s&&e.apply(r,i)}};


window.addEventListener("load", matchHeights, false);
window.addEventListener("resize", debounce(matchHeights, 100, false), false);

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console