-1

I have a div wrapper which contains an iframe, and inside the iframe I have a two divs, one needs to be a fixed header and the other one should be a scrollable content. But the problem is that the whole iframe is scrollable also with the header div which should be fixed. I already tried setting the #header div to position: fixed or absolute but that is not good solution because it shows the scrollbar even on the header div. Can I have scrollbar only for the #content div?

Here is my code

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;
}

live demo here http://output.jsbin.com/wepoxetovi

EDIT: this question was marked as duplicate of HTML iframe - disable scroll

I disagree, my problem is not to hide the scrollbar, but use it only on the #content div, therefore the answer on the other questions are not related nor solving my problem.

EDIT 2: this question was again marked as a duplicate of Making a div vertically scrollable using CSS

Again, I disagree on this, because the provided answer does not solve my problem for this case.

Linux_cat
  • 45
  • 12
  • Also `#iframeWrapper { overflow:hidden }` – mplungjan Feb 13 '18 at 13:01
  • @mplungjan I have added that, it has no effect on the scrollbar. Also you wrongly marked my question as a duplicate. – Linux_cat Feb 13 '18 at 13:11
  • I have reopened. Your update does not convince me it is not a duplicate. You have scroll bars for the div wrapper and/or scrollbars for the iFrame and you just want scrollbars for the div IN the iFrame - so how is this not a dupe? – mplungjan Feb 13 '18 at 13:26
  • Possible duplicate of [Making a div vertically scrollable using CSS](https://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css) – CBroe Feb 13 '18 at 13:27
  • (If your question basically boils down to _“Can I have scrollbar only for the #content div?”_, then _this_ duplicate should do.) – CBroe Feb 13 '18 at 13:27
  • @mplungjan it's not a dupe because, your suggestion doesn't work for my case. It's not a dupe because the answer in the question you refer to is not solving my issue. If you believe I am wrong, you can prove me wrong, by editing my live demo. – Linux_cat Feb 13 '18 at 16:48
  • @CBroe sorry, I disagree with you too, it's not a duplicate question that you refer to and the reason is that for my case the solution there does not work. You can prove me wrong by posting a working live demo by editing my live demo. – Linux_cat Feb 13 '18 at 16:50
  • If you just need this for fixed heights, then this should be pretty trivial. But your iframe doesn't even have a height ... you don't expect that to grow on its own, right? Without a height specified for the iframe, you should only get 300px browser default. – CBroe Feb 13 '18 at 17:07
  • @CBroe good point, thank you. This moved my issue to the next level and I am closer to a working solution. I have added height to the iframe and now the #content has a scrollbar. But another issue now is, that if I scroll down the scrollbar gets lost in the bottom of the iframe. Here is a live demo http://output.jsbin.com/cewoqoxapi/1 – Linux_cat Feb 13 '18 at 17:56
  • Reduce the height of the content div then, something about 470px ... – CBroe Feb 13 '18 at 18:25
  • @CBroe you are genius. Thank you man. Here is a working example http://jsbin.com/roluvayoke/1 – Linux_cat Feb 13 '18 at 18:49

1 Answers1

1

Thanks to @CBroe I could solve this issue.

My iframe needed height to be defined.

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

Here is a working example

http://jsbin.com/roluvayoke/1

Linux_cat
  • 45
  • 12