How can I use iframe tag to create a full-height, "sticky" side navigation instead of using deprecated frameset tag?

Question

I want to use iframe tag instead of deprecated frameset tag to create a full-height, sticky side navigation? This can be set up easily with frameset tag using its cols attribute.

I found some useful help in the answers to the question (Alternative for frames in html5 using iframes). However, those answers do not suggest some useful hints for creating a laft-side panel for the navigation items.

<style>

    * {
      box-sizing: border-box;
    }

    .header {
      padding: 15px;
    }

    .menu {
      padding: 5px;
      margin: 0;
      padding: 0;
      width: 25%;
      height: 100%;
      background-color: #f1f1f1;
      float: left;
      overflow: auto;}

    .main {
      width: 75%;
      float: left;
      padding: 15px;
      margin-left:25%;
      padding:1px 16px;
      height:1000px;
    }
</style>

    <div class="header">
  <h1>Computer Networks</h1>
</div>
 <hr>
<div class="menu">
    <iframe id="bookpage" name="bookpage" src="Navigation.html"></iframe>
</div>

<div class="main">
  <h1>The Content</h1>
    <iframe id="content01" name="content01" src="courses/DCN/Computer Network Types.html"></iframe>

</div>

iframe tag only adds a frame or box, but for the case shown in my code, frameset tag divides the view-port into two columns, in which navigation is placed on the left hand side of the page. How can I get this output using an alternative method, i.e, iframe HTML5 tag?