CSS/DIV/HTML page design for comparing two documents (like Diff/Merge)?-CodePudding

I need to create a simple HTML page for comparing two documents - something similar to Diff/Merge tools like WinMerge. Basically, the page should be divided in half (vertically) - each pane having its own, independent vertical scrollbar. On top of both panes, there should be a fixed-height, sticky header with each document's name:

Now, this design is trivial to implement using prehistoric HTML4 feature - frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
  <FRAMESET cols="50%, 50%">
    <FRAMESET rows="45px, *">
      <FRAME src="header_left.html">
      <FRAME src="content_left.html">
    </FRAMESET>
    <FRAMESET rows="45px, *">
      <FRAME src="header_right.html">
      <FRAME src="content_right.html">
    </FRAMESET>
  </FRAMESET>
</HTML>

My question is: how to replicate the same design using DIVs? I want the page to be very minimal, without Bootstrap or JavaScript. Contents of all panes should be included directly in the page (not loaded from external HTMLs).

Thanks!

CodePudding user response：

You can visit the link related to the problem. Split page with two div tags into two parts, each with it's own scrollbar

CodePudding user response：

For me, the biggest problem wasn't dividing the page into 2 scrollable panes, but having two sticky headers at the top. In the end, I decided to go with the below solution, which works fine; the only disadvantage is that the height of the header row must be expressed in percents (8%), while I would prefer to have it in pixels...

<!doctype html>
<html>
  <head>
    <style>
      .header {
        width: 50%;
        height: 8%;
        position: fixed;
        overflow: hidden;
        top: 0;
        margin: 0;
        padding: 0;
        text-align: center;
      }

      .pane {
        width: 50%;
        height: 92%;
        position: fixed;
        overflow-x: hidden;
        overflow-y: scroll;
        bottom: 0;
        margin: 0;
        padding: 0;
        text-align: justify;
      }

      .header .padding {
        padding: 20px;
      }

      .pane .padding {
        padding: 50px;
      }

      .left {
        left: 0;
      }

      .right {
        right: 0;
      }
    </style>
  </head>

  <body>
    <div ><div >FIXED HEADER LEFT</div></div>
    <div ><div >FIXED HEADER RIGHT</div></div>
    <div ><div >SCROLLABLE CONTENT LEFT</div></div>
    <div ><div >SCROLLABLE CONTENT RIGHT</div></div>
  </body>
</html>