JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<div id="outer">
  <div id="testId">
    See console for height calculation
  </div>
</div>

<div id="outerBorder">
  <div id="testId2">
    See console for height calculation
  </div>
</div>

CSS

#testId, #testId2 {
  background-color: pink;
  margin-top: 50px;
  margin-bottom: 2px;
  padding-top: 4px;
  padding-bottom: 8px;
  min-height: 100px;
}

#outerBorder {
  border: 1px solid black;
}

JavaScript

var calcHeight = function(expr) {
  var b = getComputedStyle(expr);
  return expr.offsetHeight +
      parseFloat(b.marginTop) +
      parseFloat(b.marginBottom);
}

var sizes = function(expr) {
  console.log(expr + ': ' + calcHeight($(expr)[0]));
}

$(document).ready(function() {
  sizes('#outer');
  sizes('#testId');
  sizes('#outerBorder');
  sizes('#testId2');
});