Menu
This is iframe code of google translate.
<div id="contentframe" style="top: 160px; left: 0px;">
<iframe src="/translate_p?hl=en&ie=UTF8&prev=_t&sl=auto&tl=en&u=http://yahoo.co.jp/&depth=1&usg=ALkJrhjrVT6Mc1tnruB-zgrtu9cyQ1bSeA" name="c" frameborder="0" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;"></div>
</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;"></div>
</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.
295
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.
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.
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.
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.
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.
124
you have to use this css property,
position:relative;
use it for your #contentframe div tag
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
