Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Iframe positioning

This is iframe code of google translate.

<div id="contentframe" style="top: 160px; left: 0px;">
<iframe src="/translate_p?hl=en&amp;ie=UTF8&amp;prev=_t&amp;sl=auto&amp;tl=en&amp;u=http://yahoo.co.jp/&amp;depth=1&amp;usg=ALkJrhjrVT6Mc1tnruB-zgrtu9cyQ1bSeA" name="c" frameborder="0" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;">&lt;/div&gt;
</iframe></div>

I tried to do something similar with the same div and iframe tags but the html page does not end up like google translate.

<div id="contentframe" style="top: 160px; left: 0px;">
<iframe src="http://stackoverflow.com" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;">&lt;/div&gt;
</iframe></div>

The iframe appears right at the top of the page instead of appearing 160px later, as specified by the div.

I'm not sure what is wrong here with my code, which is almost the same as the Google code.

Edit: The adding of the position:relative to the tag is not suitable as a solution. It shrinks the div into a bar with a small height. It also means that the exact position of the with respect to the page cannot be specified as a result.

like image 295
John Tan Avatar asked Mar 23 '13 14:03

John Tan


People also ask

How do I change the position of an iframe?

position: absolute; This will give the iframe a position relative to the wrapper and let it be positioned over the padding of the wrapper. top: 0 and left: 0 are used to position the iframe at the center of the container. width: 100% and height: 100% make the iframe take all of the wrapper's space.

Does anyone use iframes anymore?

You see code iframes commonly used on websites that need to include external content like a Google map or a video from YouTube. Both of those popular websites use iframes in their embed code.

What is an iframe and why is it bad?

iframe injection is a very common cross-site scripting attack. iframes use multiple tags to display HTML documents on web pages and redirect users to different web addresses. This behavior allows 3rd parties to inject malicious executables, viruses, or worms into your application and execute them in user's devices.

Where do you put iframe in HTML?

Complete HTML/CSS Course 2022 The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.


2 Answers

It's because you're missing position:relative; on #contentframe

<div id="contentframe" style="position:relative; top: 160px; left: 0px;">

position:absolute; positions itself against the closest ancestor that has a position that is not static. Since the default is static that is what was causing your issue.

like image 124
Daniel Imms Avatar answered Nov 24 '22 00:11

Daniel Imms


you have to use this css property,

 position:relative;

use it for your #contentframe div tag

like image 23
user2536752 Avatar answered Nov 24 '22 00:11

user2536752