I'm not very good at coding and this time I couldn't even find an answer from the Internet.
I've made an iframe and placed it inside a div. I want to scroll what's inside the iframe, but for some reason I cannot scroll to the end of the page.
I'm not very good at explaining, so I hope these pictures will clear what I mean:
What I have: http://i87.photobucket.com/albums/k123/gaikotsu_/scroll.png
What I want: http://i87.photobucket.com/albums/k123/gaikotsu_/scroll2.png
As you can see, the iframe is cut at the bottom so that 3 rows of art are missing. I've tried everything I've been able to think of and it's just making me frustrated!
Here's the css for the div:
#main {
background-color: transparent;
}
.frame {
display: block;
border: medium none;
position: absolute
height: 100%;
width: 100%;
overflow: hidden;
}
And here's how I've created the div/iframe:
<div id="main" style="overflow-y: auto; height: 100%; overflow-x: hidden; position: absolute; left: 294; top: 44; border: ">
<iframe name="main" src="main.htm" height="710px" width="610px" scrolling="no" border="0" frameborder="0" allowtransparency="true" class="frame">
</iframe>
</div>
I appreciate any kind of help! Thanks for reading!
You are missing a semi-colon after position: absolute in .frame CSS.
It makes the next line, height:100%, unresolved.
I was also facing the same problem.
I set
iframe{
height: 100%;
}
And it worked for me.
Related
I made a banner list thenk put my website, on desktop there is no problem bu on mobile its cutting the banners.
Mobile view
this is my iframe placement code:
<iframe scrolling="no" width="75%" height="670"src="/html/banners.html"></iframe>
<style>
iframe {
margin: 0 auto;
display: block;
}
#media(min-width:480px) {
iframe {
height:750px !important;
}
</style>
and this is my banner list codes: Banner list code
How can I resolve thisheight issue? can yoou please help me?
Many thanks.
Please refer to this article Using David J Bradshaw's iframe-resizer to solve iframe height and width issues.
You can to add a containing wrapper around the iframe.
<div class="iframe-container">
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" allowfullscreen="" frameborder="0">
</iframe>
</div>
Then. you can add css.
.iframe-container{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I've succeeded in doing this a dozen different ways on desktop, but nothing seems to work on a mobile phone.
I've tried:
- relative positions, absolute positions
- float
- various combinations of widths, margins and paddings
- I even tried using a 1x2 table, where the first cell used width to push the 2nd cell over to the right
Can it even be done? Surely I've seen it done?
How do you position a div containing iframe on right-hand side of screen?
You might try putting a wrapper around the iframe, then positioning the wrapper.
css
body {
position: relative;
width: 100%;}
.wrapper {
position: absolute;
right: 0;}
html
<div class="wrapper">
<iframe src="https://www.w3schools.com">
</iframe>
</div>
Without seeing the complete html/css of both the page and the iframe, that's the best recommendation I have. The iframe itself can (and likely does) have it's own CSS, so keep that in mind too.
Here is a working example https://www.w3schools.com/code/tryit.asp?filename=G86JSY65NPG2
The iframe contents didn't load properly on my mobile, but the iframe box is still there and positioned on the right.
OK, I finally managed something like it using tables.
Not only got on the right hand side, but also bottom right, which was a further goal.
<table id="table"><tr>
<td id="cell1"> </td>
<td id="cell2">
<div id="video">
<iframe src="https://www.youtube.com/embed/.......></iframe>
</div>
</td>
</tr></table>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#table {
height:100%;
width:100%;
}
#cell1 {
width:100%;
}
#video {
position: absolute;
width: 50vmax;
height: 50vmax;
right: -25vmax;
padding-bottom: 20vmax;
}
#video iframe {
border: 0px;
padding-bottom: 20vmax;
padding-top: 0vmax;
width: 20vmax;
height: 20vmax;
}
I've tried every combination of properties and attributes I can think of to get this iframe to embed in a WordPress post so that all of it is visible on both mobile and large screens. It seems I need to specify a height to get the whole frame to display, but doing so then stops all the width showing on mobile.
Any help much appreciated.
<div markdown="0" id="island">
<iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>
You need to create your iframe inside another element (with it's position relative), and place your iframe with an absolute position:
The padding-top: 56.25% is useful for keeping the ratio (16:9) of the iframe.
Working JSfiddle (try resizing the display tab :)).
Html:
<section>
<article id="iframe">
<iframe src="src.html"></iframe>
</article>
</section>
Css:
section{
max-width: 800px;
}
#iframe{
width: 100%;
max-width: 800px;
position: relative;
padding-top: 56.25%;
}
iframe{
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
margin: auto;
display: block;
position: absolute;
}
src: smashingmagazine.com
edit: here's a video of a resizeable iframe :)
edit2: oopps, forgot a section tag
I need to remove vertical scrollbar in an iframe. I have tried using overflow: hidden; still not working. Please help.
How it looks now
Code:
#iphone4 {
background-image: url("ipad_new2.png");
background-repeat: no-repeat;
height: 900px;
width: 750px;
margin: auto ;
position: relative;
overflow: hidden;
}
/*Mobile iframe CSS*/
iframe {
height: 700px;
width: 525px;
position: absolute;
top: 68px;
margin: auto ;
left: 61.99px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="iphone4" >
<iframe src="index_atish.html" seamless="seamless"></iframe>
</div>
</body>
</html>
overflow isn't a solution for HTML5 as the only modern browser which wrongly supports this is Firefox.
A current solution would be to combine the two:
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
check This
I think it'll help please check below mentioned link:
<div id="iphone4" >
<iframe src="index_atish.html" seamless="seamless"></iframe>
</div>
/*Mobile iframe CSS*/
iframe {
height: 100%;
width: 100%;
position: absolute;
top: 0;
margin: auto ;
left: 0;
border:none;
}
body{margin:0px;}
https://jsfiddle.net/xnt014a8/2/
You can't really remove vertical scrollbar if you have dynamic content in your iframe using any css property.
You can refer this answer to set height dynamically at load time. If your content inside iframe is constantly changing then you have to use something like MutationObserver and the pass the resize function as an callback defined in the linked answer.
you could try
iframe{scrolling="no"}
I want to position Google maps on the bottom of my page, but no matter what numbers I insert, it keeps staying on the top left hand corner and won't budge. I can resize it, but I can't seem to move the positioning. Any help?
HTML:
<iframe
marginwidth="0" marginheight="0" scrolling="no" width="422" height="300"
frameborder="0" scrolling="no"
src="https://maps.google.ca/maps?ie=UTF8&cid=7805933538308657347&q=Hibiscus&gl=CA&hl=en&t=m&z=16&iwloc=A&output=embed">
</iframe>
CSS:
.iframe {
position: absolute;
padding-bottom: 65%;
padding-top: 30px;
overflow: hidden;
top: 8000px;
left: 400px;
width: 100%;
height: 100%;
}
Simply put the iframe in the footer tag of your page.
HTML
<html>
<body>
stuff...
</body>
<footer>
<iframe style="width:100%; height:100%; position:absolute;"
marginwidth="0" marginheight="0" scrolling="no" width="422" height="300"
frameborder="0" scrolling="no"
src="https://maps.google.ca/maps?ie=UTF8&cid=7805933538308657347&q=Hibiscus&gl=CA&hl=en&t=m&z=16&iwloc=A&output=embed">
</iframe>
</footer>
</html>
CSS
.iframe {
position: absolute;
padding-bottom: 65%; //65% padding-bottom is massive... are you sure you want that much?
padding-top: 30px;
width: 100%;
height: 100%;
//overflow:hidden; Why that? Doesn't do anything usefull in this situation.
//left:400; Is it supposed to be 400px? If so, your page is pretty huge considering you have a map the size of your page.
}
Since you are implementing position absolute, I guess you can just add bottom:0; in the iframe class if you want it to be always at the bottom of the page
.iframe {
position: absolute;
bottom:0;
overflow: hidden;
left: 400px; <-- do you want to set margin on the left side of the map?
width: 100%;
height: 100%;
}
I think your problem lies in your CSS. You have a .iframe which means any elements with class="iframe" will inherit those properties. Your html you supplied doesn't look like it has anywhere a class of iframe. You can either keep your CSS the same and add class="iframe" to your iframe or change .iframe to iframe in your CSS. Personally I'd go with the .iframe and add class="iframe" to the iframe but I'd rename the class to something like .google-maps
<iframe class="iframe" ...></iframe>
iframe /*or*/ .iframe{
position: absolute;
padding-bottom: 65%;
padding-top: 30px;
overflow: hidden;
top: 8000px;
left: 400px;
width: 100%;
height: 100%;
}
EDIT:
Looking over your question again I have a suggestion to try position:{absolute, relative or fixed} to see if changing the position attribute which might solve your problem.