JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<header id="page-header" class="content-info" role="contentinfo">
        <!-- Nav -->
        <nav id="nav">
            <ul>
                <li><a href="1.html">Menu item 1</a></li>
                <li><span>Menu item 2</span>
                <li><a href="3.html">Menu item 3</a></li>
                <li><a href="4.html">Menu item 4</a></li>
                <li><a href="5.html">Menu item 5</a></li>
            </ul>
        </nav>
    </header>
<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper sagittis purus, nec convallis elit adipiscing eget. Vivamus hendrerit sapien nisl, nec lobortis quam faucibus sed. Morbi congue, sapien in suscipit semper, tellus dolor sodales nibh, ac consectetur sapien velit ut dui. Curabitur fermentum sed turpis in auctor. Curabitur mattis at nisl nec luctus. Aliquam facilisis commodo varius. Nunc scelerisque risus id nunc sollicitudin egestas. Phasellus scelerisque, odio vitae aliquam convallis, eros tortor eleifend elit, in facilisis orci diam eu justo. Mauris mi risus, eleifend id ultrices et, ultricies a nunc. Praesent ultrices id elit tempor ultricies. Nam et sollicitudin arcu, et hendrerit felis. Praesent et nunc et magna consectetur rutrum a non enim. Aliquam erat volutpat. Aliquam id nunc dui. Ut eu orci sit amet neque semper tincidunt.</p>
    
    <p>Pellentesque interdum in nulla eget ultricies. Fusce quis risus non mi convallis ultrices. Vivamus vel nunc nisl. Ut nulla libero, blandit sit amet hendrerit id, pharetra sed mauris. Duis fermentum est vitae mi vestibulum, quis auctor odio blandit. Nam eu turpis massa. Aliquam tincidunt semper tellus in interdum. Duis pulvinar sapien eu ipsum ornare, ut sodales purus ultricies. Phasellus eget tortor posuere ligula congue consectetur vitae id tortor. Sed nibh ante, semper quis ultrices in, feugiat vel dui. Maecenas blandit, odio nec accumsan sagittis, diam turpis ultrices leo, eu pharetra felis elit at metus. Phasellus eget...

CSS

#page-header {
    z-index: 9999;
    position: fixed;
    line-height: 40px;
    top: 0;
    right: 0;
    background: black;
    text-align: center;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,0.2);
    margin-top: 0;
    margin-bottom: 2px;
    color: #5b5b5b;
    display: inline-table;
}
#nav ul li {
    display:inline;
}
    #nav ul li a {
        color:#ccc;
    }
    #nav ul li a:hover {
        color:blue;
    }
#content {
    margin-top:40px;
}

JavaScript

var newHeight = $('#page-header').height();

$('#content').css('height', newHeight);