0

With the current code below, it gives me a scrollbar, but instead, I want the full webpage to show. It seems to work if I change the height from 100% to 1150px, but I want it to be dynamic, hence, want to make it 100%. The width seems to be working fine with 100%, just not the height.

<div style="overflow:auto;-webkit-overflow-scrolling:touch; border:1px solid black">
<iframe src="http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm" 
style="width:100%;height:100%"></iframe>
</div>
4
  • @DontVoteMeDown i think he means only inline styles
    – user7148391
    Sep 18, 2019 at 18:41
  • With the current code below, it gives me a scrollbar, but instead, I want the full webpage to show. What if the full page is larger than the viewport ? a scrollbar will have to be introduced to enable the user access to the rest of the page, Don't you think ?
    – user7148391
    Sep 18, 2019 at 19:51
  • The full page is not larger than the viewport because I can make it work with 1150px. Sep 18, 2019 at 22:04
  • Well that only your viewport you can't assume everyone has the same dimensions as you because it's not, if you'd like to know when i try height:1150px i still get scrollbars
    – user7148391
    Sep 19, 2019 at 10:44

3 Answers 3

0

It is a bad practice to use inline style, I recommend using a css class to apply these styles

.iframeStyle{
  width:100%;
  height:100%; 
  border: 0;
}

.divIFrame{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid black;
}
<div class="divIFrame">
  <iframe src="http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm" class="iframeStyle"></iframe>
</div>

2
  • Agree, but OP did ask for inline-style. Anyway it's the same solution that i suggest - doesn't it? (:
    – A. Meshu
    Sep 18, 2019 at 18:54
  • It still gives me the scrollbar. I want it to fully display without having to scroll up/down. Sep 18, 2019 at 22:15
0

Use 100vh for height if you are targeting newer browsers that supports vh measurement.

<iframe style="height:100vh;width:100%" />
3
  • This won't solve it, now you need to omit div's border as well.
    – A. Meshu
    Sep 18, 2019 at 19:15
  • It still gives me the scrollbar. I want it to fully display without having to scroll up/down. Sep 18, 2019 at 19:16
  • <iframe src="example.com" style="height:100vh;width:100%;border:0;"></iframe> would work, but internal page css takes over responsive, now if the height and is declared, then it could be scaled. that could be done with jquery or javascript. could use a bootstrap responsive method, which would be using a jquery script in its library.
    – drtechno
    Sep 18, 2019 at 19:29
0

<iframe> initial style is with border. Set the border to 0 and that's it. Example:

<div style="overflow:auto;-webkit-overflow-scrolling:touch; border:1px solid black;">
  <iframe src="http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm" style="width:100%;height:100%; border: 0;"></iframe>
</div>

EDIT

If you want to hide scroll whatsoever you need to style the <body> tag as well (set margin: 0; and use the overflow:hidden). Now you don't need the wrapping div at all:

<body style="margin:0; overflow: hidden">
  <iframe src="URL" style="width: 100vw; height: 100vh; border: 0;"></iframe>
7
  • It still gives me the scrollbar. I want it to fully display without having to scroll up/down. Sep 18, 2019 at 19:15
  • Do you mean the inner scroll on the iframe? you can add overflow:hidden to it, but note that you won't be able to scroll the content.
    – A. Meshu
    Sep 18, 2019 at 19:20
  • related: stackoverflow.com/questions/7398142/…
    – A. Meshu
    Sep 18, 2019 at 19:21
  • That is not what I am looking for. Yes, I do want to hide it, but at the same time, the full page should display without having to scroll. Sep 18, 2019 at 22:12
  • I edit the answer with full screen iframe without scroll option.
    – A. Meshu
    Sep 19, 2019 at 5:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.