JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sub_navi">
<li><a href="#sheds_housing">Sheds &amp; Housing</a></li>
<li><a href="#feed_fodder">Feed &amp; Fodder</a></li>
<li><a href="#med_vac">Medication &amp; Vaccination</a></li>
</ul><div id="content"><!-- start content ===================================================================== -->

<div id="content_pic"><!-- start content_pic ============================================================= -->
<img src="images/cattle/cattle_main.jpg" width="400" height="300" alt="Cattle Main" title="Cattle Main" />
</div><!-- end content_pic =============================================================================== -->

<p>Pak United Food Services Ltd., (PUFS) has earned a creditable name and become a major player in the animal husbandry market by building upon Pakistan&apos;s large livestock population. Introducing the concept of corporate cattle farming on scientific lines, the conglomerate uses a livestock development policy consisting of innovative strategies and action plans with the intention of bringing about a radical change in the current livestock production system. The cattle farms are established on rich and fertile acres of land and consist of an impressive and mixed herd of cows/buffalos and sheep/goats.</p>
<p>A hybrid meat breed is developed by crossing the local indigenous breeds which are predominately draught/milch animals with high meat yielding animals from other parts of the world. A herd management system is incorporated to improve record keeping and obtain information for bench marking decisions. The farms employ a state of the art feedlot design involving the integration of the standard components into a fully functional operating system. This consists of housing, feeding, watering, health-care and cattle effluent &amp; manure management systems, making them well known across the country.</p>

<div id="sheds_housing"><!-- start sheds_housing ========================================================= -->
<h1>sheds &amp;...

JavaScript

var elem = $('#med_vac');
var elem_height = elem.height();

$(window).on('resize', function(){
    
    var window_height = $(this).height();
    var new_height = 0;
    
    //Calculate height so that we have enough padding at the bottom
    if(window_height > elem_height) new_height = window_height;
    
    //This line prevents unnecessay extra padding being added
    //if the content is taller than the window.
    else new_height = elem_height;
    
    //Set the new height
    elem.height(new_height);
    
    //If the anchor is active, make sure the title is at the top.
    //This isn't strictly necessary, it just makes sure the content
    //above the active element isn't shown if the window is resized.
    //Comment out the "window.scrollTo" line to see the difference.
    var active_elem = $(window.location.hash);
    if(active_elem.length > 0){
        window.scrollTo(0,active_elem.offset().top);
    }
    
}).trigger('resize'); //Trigger initial resize to set eveything up