Question

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

设置滚动条

这是我的代码

file1 html：

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

file1 css：

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

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

file2 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>

file2 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

的副本

同样，我对此持不同意见，因为提供的答案并不能解决我的问题。

Answer 1

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

我的iframe需要定义高度。

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

这是一个工作示例

http://jsbin.com/roluvayoke/1

如何在一个包含在div

1 个答案: