JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<div id="output">asdf</div>

<div id="sample" class="sampleClass">
  <div>hello</div>
  <div>hello</div>  
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
</div>

CSS

.sampleClass {
 margin: 10px;
 padding: 10px;
 height: 300px;
 overflow-y: auto;
 border: solid blue;
 //margin: 10px 300px 10px 25px;
 margin: 0px
 position: 'relative'
}

JavaScript

function run(){
  console.log('run')
  var node = document.getElementById('sample');
  var nodeHeight = node.offsetHeight;
  var boundingHeight = node.getBoundingClientRect();
  console.log(boundingHeight);
  var result = 'nodeheight: ' + nodeHeight;
  var style = node.currentStyle || window.getComputedStyle(node);
  console.log('marginTop: ' + style.marginTop);
  console.log('marginBottom: ' + style.marginBottom);
  document.getElementById('output').innerHTML = result;
}

run();