I am having problems with my iframe. I really want the frame to auto adjust heights according to the content within the iframe. I really want to do this via the CSS without javascript. However, I will use javascript if I have too.
I've tried height: 100%; and height: auto;, etc. I just don't know what else to try!
Here is my CSS. For the frame...
#frame {
position: relative;
overflow: hidden;
width: 860px;
height: 100%;
}
And then for the frame's page.
#wrap {
float: left;
position: absolute;
overflow: hidden;
width: 780px;
height: 100%;
text-align: justify;
font-size: 16px;
color: #6BA070;
letter-spacing: 3px;
}
The page's coding looks like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" �� "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navigation">
home
about
fanlisting
100 reasons
letter
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Please note that the URL within the iframe is different then the website the iframe will be displayed on. However, I have access to both websites.
Can anyone help?
I had this same issue but found the following that works great:
The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.
Here is what a typical YouTube embed code looks like, with fixed width and height:
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
And use the following CSS:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Here is the page I found the solution on:
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
Depending on your aspect ratio, you will probably need to adjust the padding-bottom: 56.25%; to get the height right.
This is my PURE CSS solution :)
Add, scrolling yes to your iframe.
<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>
The trick :)
<style>
html, body, iframe { height: 100%; }
html { overflow: hidden; }
</style>
You don't need to worry about responsiveness :)
#SweetSpice, use position as absolute in place of relative. It will work
#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}
hjpotter92
Add this to your section:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
It is posted Here
It does however use javascript, but it is simple and easy to use code that will fix your problem.
<div id="content" >
<h1>Update Information</h1>
<div id="support-box">
<div id="wrapper">
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</div>
#support-box {
width: 50%;
float: left;
display: block;
height: 20rem; /* is support box height you can change as per your requirement*/
background-color:#000;
}
#wrapper {
width: 90%;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
background:#ddd;
margin:auto;
height:100px; /* here the height values are automatic you can leave this if you can*/
}
#wrapper iframe {
width: 100%;
display: block;
padding:10px;
margin:auto;
}
https://jsfiddle.net/umd2ahce/1/
You have to use absolute position along with your desired height.
in your CSS, do the following:
#id-of-iFrame {
position: absolute;
height: 100%;
}
You should note that div tag behaves like nothing and just let you to put something in it. It means that if you insert a paragraph with 100 lines of text within a div tag, it shows all the text but its height won't change to contain all the text.
So you have to use a CSS & HTML trick to handle this issue. This trick is very simple. you must use an empty div tag with class="clear" and then you will have to add this class to your CSS. Also note that your have #wrap in your CSS file but you don't have any tag with this id. In summary you have to change you code to something like below:
HTML Code:
<!-- Change "id" from "container" to "wrap" -->
<div id="wrap">
<div id="header">
</div>
<div id="navigation">
home
about
fanlisting
100 reasons
letter
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
<!-- Add this line -->
<div class="clear"></div>
</div>
<div id="footer">
</div>
<!-- Add this line -->
<div class="clear"></div>
</div>
And also add this line to your CSS file:
.clear{ display: block; clear: both;}
According to this post
You need to add the !important css modifier to your height percentages.
Hope this helps.
Related
What I'm trying to achieve is an iframe positioned over another iframe containing a PDF document - the first iframe should be transparent, and it should cover the iframe with PDF. I need this specifically for IE (9+).
The code I've tried so far:
<html>
<head>
<style>
</style>
</head>
<body>
<iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe>
<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>
iframeContent.html:
<html>
<style type="text/css">
</style>
<body style="background: transparent">
</body>
</html>
However, the above doesn't work - the iframe is not transparent. Does anyone know how to solve this? As I said in the comments below, the solution posted below doesn't work with Adobe reader DC installed (if it works at all).
Try this code:
HTML 1
<!--Code for transparent iframe-->
<html>
<body style="background: none transparent">
<div> I am a crappy container on top of this boring PDF</div>
</body>
</html>
HTML 2
<!--Code for both iframes.
<html>
<head>
<style>
</style>
</head>
<body>
<iframe src="SO1.html" frameborder="0" style="width: 100%; height: 300px; position: fixed; left:0px; top: 0px;" allowtransparency="true"></iframe>
<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>
This positions the transparent iframe correctly on top of the PDF. Also, you had a syntax error for the attribute allowTransparency, it shouldn't have a capital T.
May be this will helps you
<html>
<head>
<style>
</style>
</head>
<body>
<iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:none transparent;" allowtransparency="true"></iframe>
<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>
iframecontent.html
<html>
<style type="text/css">
</style>
<body style="background:none transparent;">
</body>
</html>
For the iframe which you want to display transparent:
body{
opacity: 0.0;
background: transparent;
color: transparent;
}
I created two html files as below and it worked for me. I adjusted the width and height to 100% and it worked as you expect. Don't try with any jsbin etc instance and its not working there for security reasons as you load external site in iframe. Try with actual html file and load them in the browser which worked for me.
Html 1: pdf.html
<html>
<head>
<style type="text/css">
#outer {
position: fixed;
left: 150px;
top: 20px;
width: 100px;
z-index: 2;
}
#inner{
background-color: transparent;
}
.cover {
position: absolute;
border: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
#pdf {
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<iframe src="iframeContent.html" style="width:90px; height:70px; background-color: transparent;" frameborder="0" allowtransparency="true"></iframe>
</div>
<iframe class="cover" src="about:blank" allowtransparency="true"></iframe>
</div>
<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="600px" id="PDF" name="PDF" frameborder="0"></iframe>
</body>
</html>
Html 2: iframecontent.html
<html>
<body>
<h1 style="background-color:transparent;">Test</h1>
</body>
</html>
Try setting setting opacity: 0 on the outer iframe.
Using your modified code,
<iframe src="iframeContent.html" frameborder="0" style="opacity: 0; z-index: 2; width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe>
<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
You can also use z-index to manage stacking of elements. All elements default z-indez is 1. THose with higher values will appear on top of elements with a lower z-index.
I can not see side2.html below the side1.html
page.html should scroll, side1.html and side2.html should be always visible, side1 above side2.
page.html
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<style type="text/css">
<!--
body.container {
width: 100%;
height: auto;
}
.maintext {
float: right;
width: calc(100% - 210px);
}
iframe.side1 {
position: fixed;
float: left;
height: 600px;
width: 200px;
}
iframe.side2 {
position: fixed;
float: left;
top: 300px;
height: 300px;
width: 200px;
}
-->
</style>
</head>
<body>
<a name="topw" id="toppage"></a>
<div class="container">
<div class="maintext">
<a name="dic"></a><h3> Dict</h3><br/>
</div>
<iframe class="side1" src="side1.html" frameborder="0" />
<iframe class="side2" src="side2.html" frameborder="0" />
</div>
</body>
</html>
side1.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a class="menu" target="_parent" href="page.html#dic" title="title" > title </a>
</body>
</html>
side2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a target="_blank" href="http://www.ubuntu.com" title="org">.org</a>
</body>
</html>
Or could I solve the problem just with div, without iframe. Something like here. But I can not make it work: side1 above side2
Position fixed needs positioned elements top/right/down/left to reference it's offset. float will not work on fixed elements.
I have also change the height and offset of the elements so they will fill the users screen no matter what size it is.
Also as #Sim pointed out iframes are now self closing and should have a proper closing tag.
body.container {
width:100%;
}
.maintext {
min-height:1080px; /*to simulate content*/
width:100%;
box-sizing:border-box;
padding-left:200px;
background:#ddd;
}
.side1,
.side2{
position: fixed;
left:0;
width:200px;
}
iframe.side1 {
top:0;
height:70%;
}
iframe.side2 {
top:70%;
height:30%;
}
<div class="container">
<div class="maintext">
<a name="dic"></a><h3>Middle Div</h3><br/>
</div>
<iframe class="side1" src="side1.html" frameborder="0"></iframe>
<iframe class="side2" src="side2.html" frameborder="0"></iframe>
</div>
you should close your iframes with </iframe>, because they aren't empty elements (to deal with browsers that do not support <iframe>, you could add a text between the opening and the closing tag of the iframe): https://www.w3.org/wiki/HTML/Elements/iframe
use top and left to position absolute when your element is position: fixed
I've modified your code (see comments):
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<style type="text/css">
body.container {
width: 100%;
}
.maintext {
float: right;
width: calc(100% - 210px);
}
iframe.side1 {
position: fixed;
left: 0; /* use absolute positions when position fixed, not float */
top: 0;
height: 300px; /* 300px is enough, else it is behind your second iframe*/
width: 200px;
}
iframe.side2 {
position: fixed;
left: 0;
top: 300px;
height: 300px;
width: 200px;
}
</style>
</head>
<body>
<a name="topw" id="toppage"></a>
<div class="container">
<div class="maintext">
<a name="dic"></a><h3> Dict</h3><br/>
</div>
<!-- always add a closing tag to your iframes -->
<iframe class="side1" src="side1.html" frameborder="0" ></iframe>
<iframe class="side2" src="side2.html" frameborder="0" ></iframe>
</div>
</body>
</html>
I hope that solve your problem...
I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.
The relevant HTML (as a Jade template) is as follows:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch.
The corresponding CSS is as follows:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height.
Thanks for any insights that you can provide.
EDIT:
The generated HTML as requested:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right">customer login</div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or home</div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right">TermsPrivacyCorporate</div>
</div>
</div>
</div>
</body>
One solution that works in all modern browsers is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/
You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements.
If this solution doesn't work, another option is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
This is a "hidden margin" trick that also works in all modern browsers. Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/
Is there a way to make a div appear half off-screen using just CSS without knowing the width of the div?
Unless I've misunderstood the question, I think it is possible with CSS, as I hope should be clear from this jsfiddle.
Example HTML
<div class="container one">
<div class="half">Hello there.</div>
</div>
<div class="container two">
<div class="half">Hello there, you old dog.</div>
</div>
<div class="container three">
<div class="half">Hello there you old dog. Been up to your old tricks?</div>
</div>
The CSS
.container {
position: absolute;
}
.half {
position: relative;
right: 50%;
}
.two {
top: 30px;
}
.three {
top: 60px;
}
Actually, no.
The div will have it's top positioned at 50% the screen... you could assume values that would "sort of" make it look like it would be in the middle if you knew more or less the height of the div before-hand. But in short, no.
Only with tables or Javascript.
i made something from jQuery. Hope its what you are after - http://jsfiddle.net/6Guc8/1/. it gets half the width of the element and then chucks half of it out the screen.
here is the jquery
$(document).ready(function(){
var half_width = $("div").width() / 2;
$("div").css("left", -half_width);
});
here is the css
div{
background: #555;
height: 100px;
width: 100px;
position: absolute;
}
here is the html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"> </script>
</head>
<body>
<div>
</div>
</body>
</html>
It is absolutely possible in CSS only. You need 1 wrapper div, however:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#wrapper {
position: absolute;
left: 0;
}
div#wrapper div {
position: relative;
padding: 30px;
background: yellow;
left: -50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div>this div is halfway hidden, no matter what size it is.</div>
</div>
</body>
</html>
I have two separate <iframe> tags that are on the same page.
They are both in a <container> div and each <iframe> only shows a portion of each page.
The problem is when I try to put both of them on the same page, the bottom <iframe> is the same height as the top <iframe> even though I set the height of each <iframe> explicitly.
Even though each <iframe> is set to a different height, when I try to put both of them together, it messes things up.
Any help would be greatly appreciated. Thanks!
Here is my code:
HTML:
<div dir="ltr" style="text-align: left;" trbidi="on">
<title></title>
<style type="text/css">
<!--
#container{
width: 380px;
height: 360px;
overflow: hidden;
}
#container iframe {
width: 600px;
height: 475px;
margin-left: -15px;
margin-top: -90px;
border: 0;
}
-->
</style>
<div id="container">
<iframe height="200" scrolling="no" src="https://docs.google.com/spreadsheet/viewform?hl=en_US&formkey=dHJjVk94bExPMmxtaExmX1FSckpicGc6MQ#gid=0" width="600">
</iframe>
</div>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<title></title>
<style type="text/css">
<!--
#container {
width: 400px;
height: 65px;
overflow: hidden;
}
#container iframe {
width: 600px;
height: 675px;
margin-left: -20px;
margin-top: -350px;
border: 0;
}
-->
</style>
<div id="container">
<iframe height="200" scrolling="no" src="http://scores.espn.go.com/nfl/boxscore?gameId=310818027" width="600">
</iframe>
</div>
</div>
The value for the id attribute for any element in the same html document must be unique. You should not have two <div> elements with the id of container on the same page.
If you needed two elements to have similar styles, you could use the same class attribute on each of them.
In this case, you are looking to have different styles, so my recommendation would be to change the ids for each container div.
HTML:
<div dir="ltr" style="text-align: left;" trbidi="on">
<title></title>
<div id="spreadsheet">
<iframe scrolling="no" src="https://docs.google.com/spreadsheet/viewform?hl=en_US&formkey=dHJjVk94bExPMmxtaExmX1FSckpicGc6MQ#gid=0" width="600">
</iframe>
</div>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<title></title>
<div id="scores">
<iframe scrolling="no" src="http://scores.espn.go.com/nfl/boxscore?gameId=310818027">
</iframe>
</div>
</div>
CSS:
#spreadsheet{
width: 380px;
height: 360px;
overflow: hidden;
}
#spreadsheet iframe {
width: 600px;
height: 470px;
margin-left: -5px;
margin-top: -80px;
border: 0;
}
#scores {
width: 400px;
height: 65px;
overflow: hidden;
}
#scores iframe {
width: 600px;
height: 685px;
margin-left: -20px;
margin-top: -375px;
border: 0;
}
Note:
The CSS should ideally be placed in a separate document at a different URL and referred to in a <link> tag in the <head> section of your HTML document. If you need to have the styles inline, it is a best practice to include them in the <head> section of the document inside a <style> tag.
I've put an example of these changes in a jsfiddle.