JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<div class="outer">
    <div class="header">Header cont jf fgjfjf jg ipsum dolor sit amet, consectetur adipiscing elit. In ut tortor nec tellus porta placerat. Suspendisse potenti. In iaculis, mauris sed sagittis venenatis, lorem metus gravida libero, in fermentum erat sem nec magna. Donec imperdiet tristique augue sit amet bibendum. Sed hendrerit erat ac est faucibus eu tempus turpis facilisis. Aliquam velit augue, eleifend at feugiat ac, gravida nec nulla. Fusce a diam nibh, id porttitor nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at congue velit. Maecenas convallis justo tempus arcu faucibus tempus. Cras suscipit velit aliquet nisi porta consectetur. Nam congue consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut tortor nec tellus porta placerat. Suspendisse potenti. In iaculis, mauris sed sagittis venenatis, lorem metus gravida libero, in fermentum erat sem nec magna. Donec imperdiet tristique augue sit amet bibendum. Sed hendrerit erat ac est faucibus eu tempus turpis facilisis. Aliquam velit augue, eleifend at feugiat ac, gravida nec nulla. Fusce a diam nibh, id porttitor nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at congue velit. Maecenas convallis justo tempus arcu faucibus tempus. Cras suscipit velit aliquet nisi porta consectetur. Nam congue consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut tortor nec tellus porta placerat. Suspendisse potenti. In iaculis, mauris sed sagittis venenatis, lorem metus gravida libero, in fermentum erat sem nec magna. Donec imperdiet tristique augue sit amet bibendum. Sed hendrerit erat ac est faucibus eu tempus turpis facilisis. Aliquam velit augue, eleifend at feugiat ac, gravida nec nulla. Fusce a diam nibh, id porttitor nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at congue velit. Maecenas convallis justo tempus...

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;  
    background: #e0e0e0;
    font-family: arial;
}

.outer {
    height: 100%;
}
.header, .header-push {
    padding: 5px;
}

.header {
    background: #c0c0c0;
    position: fixed;
    left: 0;
    right: 0;
}
.content {
    padding: 5px;
}

JavaScript

$(document).ready(function () {
  $('.content').css('padding-top', ($('.header').innerHeight() - 20));
});