JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="header">header</div>
    <div class="content">
        <a onClick="document.getElementById('show').style.display = 'block';">Показать content</a>
        <div id="show">
            <a href="#yakor">якорь</a>
            <h2>1<h2>
            <pre>
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
                1
            </pre>
            <h2 id="yakor">2<h2>
            <pre>
                2
                2
                2
                2
                2
                2
                2
                2
                2
                2
                2
                2
                2
                2
                2
                2
            </pre>
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</div>

CSS

html,body{
    margin:0px;
    height:100%;
}

.main{
    position:relative;
    min-height:100%;
}

.header{
    height:50px;
}

.content{
    padding-bottom:50px;
}

.footer{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
}

#show{
    display:none;
}