'How can I make my resizable iframes look and feel like frameset?

  • My website is a time-machine back to 1998 with <frameset> and <frame> and per-frame PHP files: page1.php, page2.php, etc 🎉.
  • But it's time to modernize, but apparently <frameset> and <frame> is now obsolete in HTML5 😭.
  • So how can I convert my <frameset> layout to something more modern?
    • I still need to keep the page1.php, page2.php, and page3.php files separate, so I still need to use <iframe> to show their content in a larger layout page.
    • So how can I make my <iframe> elements look and feel the way <frameset> did?
    • Oh, and it must work without JavaScript.

Posted below is my page as-is, and below that is what I've tried so far:

Original <frameset> page::

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="referrer" content="no-referrer">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    </head>
    <frameset rows="150px,*">
        <frame src="page1.php"></frame>
        <frameset cols="*,150px">
            <frame src="page2.php"></frame>
            <frame src="page3.php"></frame>
        </frameset>          
    </frameset>
</html>

New version::

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="referrer" content="no-referrer">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
            body{ height: 100vh; width: 100vw;  max-height: 100vh;  max-width: 100vw;  padding: 0; margin: 0;  background-color: #333;
            }
            *:focus { outline:0px none transparent; }
            .resizer { display:flex; margin:0; padding:0; resize:vertical; overflow:hidden; min-height: 150px; }
            .resizer > .resized { flex-grow:1; margin:0; padding:0; border:0; height: 150px;}
            .resizerh { display:flex; margin:0; padding:0; resize:horizontal; overflow:hidden; width: 100%; }
            .resizerh > .resizedh { flex-grow:1; margin:0; padding:0; border:0 }
            .resizedhh { flex-grow:1; margin:0; padding:0; border:0; max-width: 150px; }
        </style>
    </head>
    <!--
    <frameset rows="150px,*">
        <frame src="page1.php"></frame>
        <frameset cols="*,150px">
            <frame src="page2.php"></frame>
            <frame src="page3.php"></frame>
        </frameset>          
    </frameset>
    -->
    <body>
        <div class="resizer">
            <iframe class="resized" src="data:text/html;charset=utf-8;base64,PGh0bWw+DQo8aGVhZD5QYWdlMS5waHA8L2hlYWQ+DQo8Ym9keSBzdHlsZT0iY29sb3I6IHJlZDsiPg0KPGgxPlBhZ2UxLnBocDwvaDE+DQo8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LjwvcD4NCjwvYm9keT4NCjwvaHRtbD4="></iframe>
        </div>
        <div style="display: flex; flex-direction: row">
            <div class="resizerh">
                <iframe class="resizedh" src="data:text/html;charset=utf-8;base64,PGh0bWw+DQo8aGVhZD5QYWdlMi5waHA8L2hlYWQ+DQo8Ym9keSBzdHlsZT0iY29sb3I6IGJsdWU7Ij4NCjxoMT5QYWdlMi5waHA8L2gxPg0KPHA+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2NpbmcgZWxpdC48L3A+DQo8L2JvZHk+DQo8L2h0bWw+"></iframe>
            </div>
            <div>
                <iframe class="resizedhh" src="data:text/html;charset=utf-8;base64,PGh0bWw+DQo8aGVhZD5QYWdlMy5waHA8L2hlYWQ+DQo8Ym9keSBzdHlsZT0iY29sb3I6IGdyZWVuOyI+DQo8aDE+UGFnZTMucGhwPC9oMT4NCjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg=="></iframe>
            </div>
        </div>
    </body>
</html>


body{
  height: 100vh;
  width: 100vw;
  max-height: 100vh;
  max-width: 100vw;
  padding: 0;
  margin: 0;
  background-color: #333;
}

*:focus {
  outline: 0px none transparent;
}

.resizer {
  display: flex;
  margin: 0;
  padding: 0;
  resize: vertical;
  overflow: hidden;
  min-height: 150px;
}
.resizer > .resized {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
  height: 150px;
}
.resizerh {
  display: flex;
  margin: 0;
  padding: 0;
  resize: horizontal;
  overflow: hidden;
  width: 100%;
}

.resizerh > .resizedh {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
  }
  
.resizedhh {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 150px;
}
   
<!-- <body> -->
    <!--
    <frameset rows="150px,*">
        <frame src="page1.php"></frame>
        <frameset cols="*,150px">
            <frame src="page2.php"></frame>
            <frame src="page3.php"></frame>
        </frameset>          
    </frameset>
    -->

    <div class="resizer">
        <iframe class="resized" src="data:text/html;charset=utf-8;base64,PGh0bWw+DQo8aGVhZD5QYWdlMS5waHA8L2hlYWQ+DQo8Ym9keSBzdHlsZT0iY29sb3I6IHJlZDsiPg0KPGgxPlBhZ2UxLnBocDwvaDE+DQo8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LjwvcD4NCjwvYm9keT4NCjwvaHRtbD4="></iframe>
    </div>
    <div style="display: flex; flex-direction: row">
        <div class="resizerh">
            <iframe class="resizedh" src="data:text/html;charset=utf-8;base64,PGh0bWw+DQo8aGVhZD5QYWdlMi5waHA8L2hlYWQ+DQo8Ym9keSBzdHlsZT0iY29sb3I6IGJsdWU7Ij4NCjxoMT5QYWdlMi5waHA8L2gxPg0KPHA+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2NpbmcgZWxpdC48L3A+DQo8L2JvZHk+DQo8L2h0bWw+"></iframe>
        </div>
        <div>
            <iframe class="resizedhh" src="data:text/html;charset=utf-8;base64,PGh0bWw+DQo8aGVhZD5QYWdlMy5waHA8L2hlYWQ+DQo8Ym9keSBzdHlsZT0iY29sb3I6IGdyZWVuOyI+DQo8aDE+UGFnZTMucGhwPC9oMT4NCjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg=="></iframe>
        </div>
    </div>

<!-- </body> -->
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions