I have two html files, one contains the other with an iframe, and I want to make this iframe stretch over the full height of the parent html.
So the first html file (which has a red background) look like:
<!DOCTYPE html>
<html>
<body style="background-color: red; margin: 0px; padding: 0px;">
<iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" />
</body>
</html>
The second (which has a blue background):
<!DOCTYPE html>
<html>
<body style="background-color: blue;" />
</html>
If all things are correct I expect to see only a blue background, because the iframe should overlap the entire parent page, but I see only a strip of blue, and a whole lot of red..
With the HTML5 doctype <!DOCTYPE html> I cannot seem to be getting the correct result:
If I remove the HTML5 doctype I get the result I want. I think this is because it will render the HTML in quirks mode:
I do want the HTML doctype though, so how can I fix this? Thanks for looking!
CSS:
#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; }
HTML:
<div id="wrap">
<iframe src="..." frameborder="0" id="iframe"></iframe>
</div>
Live demo: http://jsfiddle.net/5G5rE/show/
Related
I am using the embed tag to display a pdf file. It works perfectly, except for the fact that the "height" property won't work when I define height with % ("width" does what it's supposed to do). It works when I use px instead of %, and I have tried changing the numbers, but none work... Does anyone have any clue why?
Thank you!
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<embed id="pdf" src="C:\path\Tysk.pdf" width="60%" height="80%"/>
<style>
#pdf {
}
</style>
</body>
</html>
With the <embed> tag, the height attribute must be displayed in pixels. Percentages are not allowed.
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
#pdf {
height: 800px;
width: 600px;
}
</style>
</head>
<body>
<embed id="pdf" src="C:\path\Tysk.pdf"/>
</body>
</html>
Source on MDN
The height=x% is depend on the height of its parent element, because it's relative to its parent. In your case, body is the parent of embed element. So if you set a height property to your body element then it will work.
this piece of code works:
<style>
embed {
margin: 0 !important;
border: 0;
width: 100%;
height: 97vh;
}
</style>
<body>
<center>
<embed src="your.pdf#toolbar=0&navpanes=0" type="application/pdf" />
</center>
</body>
From my previous answer https://stackoverflow.com/a/74354395/10802527
For a simple page all 3 behave identically their height and width must be defined in pixels or translated as %view, however browsers may add a frame embeding border of their own, so for height reduce a few points from 100vh similar reduce 100vw to avoid other embedment border/scrollbar anomalies each browser can vary but for Microsoft Edge I find style
embed, iframe, object {
margin: 0!important;
border: 0;
width: calc(100vw - 18px)!important;
min-height: calc(100vh - 18px)!important ;
}
works more often than not or as shown below simpler width: 99vw; height: 97vh; is a good place to work from
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, embed, iframe, object { margin: 0!important; border: 0; width: 99vw; height: 97vh; }
</style>
</head><body><center>
<div>embed
<embed src="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" type="application/pdf" >
</div>
<div>object
<object data="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" type="application/pdf" typemustmatch="true" >an</object>
</div>
<div>iframe
<iframe src="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" style="border:none;" >an</iframe>
</div>
</center></body></html>
I think this code will help your problem well, if you've not already tried this one.
<object data="/pdf/mysample.pdf" type="application/pdf" width="100%" height="80%">
</object>
Greetings.
Feel free to tell me the result of this try.
I am trying to make a content area with a specific size, but I want nothing to be displayed if the returned result from the api is empty.
This is the code for the html:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example"></iframe>
</div>
I'm calling an API that sometimes might return a null result.
Javascript is off the table.
I've tried to use a css restraint like this:
.myclass {
max-width: 1060px;
max-height: 392px;
& > iframe {
min-height: 0;
min-width: 0;
max-width: 1060px;
max-height: 392px;
}
& > iframe:empty {
display: none;
}
}
The behavior for the css is: the iframe is hidden all the time, although I have content inside it.
Also if the iframe is like this:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example">
<!--notice white-space here-->
</iframe>
</div>
The css will not see the iframe as empty.
I actually made it happen without javascript.
But you need to create a proxy that generates the css.
If below is not a possibility then all bets seem off. Good luck!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url('iframecheck.asp?url=http://www.example.com');
iframe {
width:1000px;
height:400px;
}
</style>
</head>
<body>
<iframe src="http://www.example.com"></iframe>
</body>
</html>
The iframecheck contains code that checks whether the url has empty response, if it does it returns css like this:
iframe {
display:none;
}
Which will automatically override the other iframe style.
Don forget to force the text/css content type header if you do.
<%response.ContentType="text/css"%>
I am trying to make a content area with a specific size, but I want nothing to be displayed if the returned result from the api is empty.
This is the code for the html:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example"></iframe>
</div>
I'm calling an API that sometimes might return a null result.
Javascript is off the table.
I've tried to use a css restraint like this:
.myclass {
max-width: 1060px;
max-height: 392px;
& > iframe {
min-height: 0;
min-width: 0;
max-width: 1060px;
max-height: 392px;
}
& > iframe:empty {
display: none;
}
}
The behavior for the css is: the iframe is hidden all the time, although I have content inside it.
Also if the iframe is like this:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example">
<!--notice white-space here-->
</iframe>
</div>
The css will not see the iframe as empty.
I actually made it happen without javascript.
But you need to create a proxy that generates the css.
If below is not a possibility then all bets seem off. Good luck!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url('iframecheck.asp?url=http://www.example.com');
iframe {
width:1000px;
height:400px;
}
</style>
</head>
<body>
<iframe src="http://www.example.com"></iframe>
</body>
</html>
The iframecheck contains code that checks whether the url has empty response, if it does it returns css like this:
iframe {
display:none;
}
Which will automatically override the other iframe style.
Don forget to force the text/css content type header if you do.
<%response.ContentType="text/css"%>
I need a way to fill the entire webpage with an iframe.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:0px; width:100%; height:100%; }
iframe{width:100%; height:95%; border:none;}
</style>
</head>
<body>
<iframe src="http://www.repubblica.it/"></iframe>
</body>
</html>
You can see it here: http://jsfiddle.net/8nh3kfws/1/
As you can see, the iframe doesn't fill the entire page but there is a big white space in the bottom. I have noticed that it works if I remove "<!DOCTYPE html>" but I don't know why.
So, How can I do it without removing "<!DOCTYPE html>" ?
Add html to your style declaration.
html, body{ margin:0px; width:100%; height:100%; }
http://jsfiddle.net/8nh3kfws/2/
Specify a position to your iframe.
iframe{width:100%; height:95%; border:none; position: absolute}
My iframe a style of style="width:100%", and it almost covers the page width. But it leaves a small margin on the left and right side. So I added body { margin:0px; } to remove the space.
It works, but the problem is that removing the margin on <body> affects other things, for example a paragraph <p> inside <body>.
Is there a way to eliminate the margin only for the <iframe>?
Code:
<!DOCTYPE html>
<html>
<body>
<p> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
You should do some like:
body{margin:0} // remove body margin
iframe{margin:0;width:100%}//remove iframe margin
p,div{margin:10px} //append margin to p and other tags
Demo for your case:
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0}
iframe{margin:0;width:100%}
p{margin:10px}
</style>
</head>
<body>
<p> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
As you can see, you can use body{margin:0 0 0 0px;} for top, right, bottom, left. You will be able to remove all spaces from browser.
<!DOCTYPE html>
<html>
<style type="text/css">
body {
margin:0 0 0 0px;
}
</style>
<body>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
what's wrong with:
iframe {
margin: 0;
}
in your iframe containg page