IFrame滚动条无法完整显示全部内容问题求助

top.html
----------------------------------------------------------------------------------
                                                                                 ^
                                                                                 |
main.html                                                                        V
----------------------------------------------------------------------------------

我有一个包含两个iframe的页面：top.html占据顶部约50px的区域，main.html位于其下方，本应占据页面剩余空间，紧贴顶部iframe的下方。

当底部iframe中的内容超出屏幕范围时，滚动条能正常出现，但无法显示全部内容。我在示例中添加了大量内容来强制触发滚动条，但即使滚动到底部，页面底部的Save按钮仍无法显示。

涉及的文件如下：

index.html #

<HTML style="overflow-y:hidden">
<TITLE>Main Page</TITLE>
<HEAD>
  <style>
    html,
    body,
    * {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      border: none;
      border-collapse: collapse;
    }

    .top {
      padding:0;
      margin: auto;
      width: 100%;
      border-collapse: collapse;
      border: none;
    }

    .bottom {
      position: absolute;
      float: left;
      top: 50px;
      width: 100%;
      bottom: 0;
      border-top: 1px solid #ccc;
      border-right: none;
      border-bottom: none;
      border-left: none;
      border-collapse: collapse;
    }

    .contentframe {
      border-collapse: collapse;
      border: none;
      bottom: 0;
      left: 0;
      margin-right: 0px;
      position: absolute;
    }
  </style>
</HEAD>

<BODY>
  <div>
    <iframe class="top" name="topmenu" src="top.html"></iframe>
  </div>
  <div class="bottom">
    <iframe class="contentframe" style="width:100%;" frameBorder="0" name="body" src="main.html" frameborder="0"
      scrolling="yes"></iframe>
  </div>
</BODY>
</HTML>

top.html #

<html>
<head>
    <style>
        .topbar {
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
            border: none;
            height: 50px;
            max-height: 50px;
            min-height: 50px;
            width: 100%;
        }

        .logo {
            padding-left: 30px;
            padding-right: 60px;
            vertical-align: middle;
            background-color: #1776BF;
            height: 50px;
        }
    </style>
</head>

<body class="topbar" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
    <table cellspacing=0 cellpadding=0 width=100%>
        <tr>
            <td>
                <table height=14 width=100% cellspacing=0>
                    <tr>
                        <td class="logo">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

main.html #

<html style="overflow-y:auto">
<head>
  <title>Config Page</title>
</head>
<body>
  <div>
    <b>Title</b>
  </div>
  <div id="formContainer" style="border:1px solid red">
    <form id="config" method="post">
      <div style="border:1px dotted green">
        Line 1<br>
        Line 2<br>
        Line 3<br>
        Line 4<br>
        Line 5<br>
        Line 6<br>
        Line 7<br>
        Line 8<br>
        Line 9<br>
        Line 10<br>
        Line 11<br>
        Line 12<br>
        Line 13<br>
        Line 14<br>
        Line 15<br>
        Line 16<br>
        Line 17<br>
        Line 18<br>
        Line 19<br>
        Line 20<br>
        Line 21<br>
        Line 22<br>
        Line 23<br>
        Line 24<br>
        Line 25<br>
        Line 26<br>
        Line 27<br>
        Line 28<br>
        Line 29<br>
        Line 30<br>
        Line 31<br>
        Line 32<br>
        Line 33<br>
        Line 34<br>
        Line 35<br>
        Line 36<br>
        Line 37<br>
        Line 38<br>
        Line 39<br>
        Line 40<br>
        Line 41<br>
        Line 42<br>
        Line 43<br>
        Line 44<br>
        Line 45<br>
        Line 46<br>
        Line 47<br>
        Line 48<br>
        Line 49<br>
        Line 50<br>
        Line 51<br>
        Line 52<br>
        Line 53<br>
        Line 54<br>
        Line 55<br>
        Line 56<br>
        Line 57<br>
        Line 58<br>
        Line 59<br>
        Line 60<br>
        Line 61<br>
        Line 62<br>
        Line 63<br>
        Line 64<br>
        Line 65<br>
        Line 66<br>
        Line 67<br>
        Line 68<br>
        Line 69<br>
        Line 70<br>
      </div>
      <br>
      <button id="submitButton" type="submit">Save</button>
    </form>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者user18248990