如何滚动iframe但不滚动它的父亲？

Question

当前我的页面有一个菜单栏和iframe部分，用于在点击时加载菜单栏中的项目。我想要iframe滚动而不是父页面（我希望菜单栏固定在顶部）。但父页面也会滚动。所以我为父页面设置了position: fixed，下面的内容只能滚动到一个点，最终会被切断（见下图）。我该如何解决这个问题？感谢〜

Answer 1

以下是使用display: table的方式，flex是另一种方式。

html,
body { height: 100%; margin: 0 }

.container {
  display: table;
  width: 100%;
  height: 100%;
}
.page-row {
  display: table-row;
  height: 0;
}
.page-row-expanded {
    height: 100%;
}

main iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.header {
  background-color: #bbb;
  padding: 10px;
}

<div class="container">
    <header class="page-row">
      <div class="header">
        Navigation bar
      </div>
    </header>
            
    <main class="page-row page-row-expanded">
        <iframe src="http://www.w3schools.com/"></iframe>
    </main>
    
</div>

Answer 2

由于

，我不知道它是否更复杂

position:fixed;

但请查看此处：Scroll Down iFrame - jQuery/JS