如何使 div 在包含在 div 中的 iframe 内可滚动答案

【问题标题】：how to make a div scrollable inside an iframe which is wrapped in a div如何使 div 在包含在 div 中的 iframe 内可滚动
【发布时间】：2018-07-23 20:31:12
【问题描述】：

我有一个包含 iframe 的 div 包装器，在 iframe 内我有两个 div，一个需要是固定的标题，另一个应该是可滚动的内容。但问题是整个 iframe 也可以滚动，标题 div 应该是固定的。我已经尝试将 #header div 设置为 position: fixed 或 absolute 但这不是一个好的解决方案，因为它甚至在标题 div 上也显示滚动条。我可以只为#content div 设置滚动条吗？

这是我的代码

文件1 html：

<div id="iframeWrapper">
  <iframe src="http://jsbin.com/lixegeriru" scrollable="no"></iframe>
</div>

文件1 css：

#iframeWrapper {
  width: 250px;
  max-height: 500px;
}

iframe {
  overflow: hidden;
  border: 2px solid black;
  width: 100%;
}

文件2 html：

<div>
<div id="header">
this is a fixed header
</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis aliquet felis non tempor. Nam sit amet ultrices lectus. Suspendisse nibh justo, hendrerit in pulvinar ac, interdum ac orci. Quisque mollis augue nec posuere ullamcorper. Phasellus accumsan semper urna, non posuere ligula consectetur vel.
</div>

</div>

文件2 css：

#header {
  width: 100%;
  height: 42px;
  background-color: #ff4045;
  color: white;
  padding: 5px;
}

#content {
  height: 2000px;
  overflow: auto;
}

现场演示http://output.jsbin.com/wepoxetovi

编辑：这个问题被标记为与HTML iframe - disable scroll重复

我不同意，我的问题不是隐藏滚动条，而是仅在#content div上使用它，因此其他问题的答案与我的问题无关，也没有解决我的问题。

编辑 2：这个问题再次被标记为 Making a div vertically scrollable using CSS 的重复项

同样，我不同意这一点，因为提供的答案并不能解决我在这种情况下的问题。

【问题讨论】：

还有#iframeWrapper { overflow:hidden }
@mplungjan 我已经添加了，它对滚动条没有影响。您还错误地将我的问题标记为重复。
我已经重新打开了。您的更新并不能说服我它不是重复的。您有 div 包装器的滚动条和/或 iFrame 的滚动条，而您只想要 iFrame 中 div 的滚动条 - 那么这怎么不是骗局呢？
Making a div vertically scrollable using CSS的可能重复
（如果您的问题基本上归结为 “我可以只为#content div 设置滚动条吗？”，那么 this 副本应该可以。 )

标签： html css iframe scroll

【解决方案1】：

感谢@CBroe，我可以解决这个问题。

我的 iframe 需要定义高度。

iframe {
  overflow: hidden;
  border: 2px solid black;
  width: 100%;
  height: 500px;
}

这是一个工作示例

http://jsbin.com/roluvayoke/1

【讨论】：