Why isn't this iframe sizing to 100%? - html

Given the following page that includes an iframe
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="min-height: 100; margin: 0px">
<iframe src="testpage.html" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%">
</body>
</html>
When it is launched, the iframe would only seems to load part of the text from testpage.html. How would one make the iframe show the entire content of testpage.html?

Set your html and body height to 100% too.
html, body { height: 100%; }
You may (or may not) also need to set display on iframe to block:
iframe { display:block; }

Related

HTML empty space on mobile devices

If I add width to any element on page which is larger than screen than on mobile devices (or Developer Tools enabled Touch simulation) I get empty space below footer.
Original site which has problem: https://www.kanemi.lv/oskarsvesters.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body style="width: 2000px;">
Test
</body>
</html>
body {
min-width: 0;
}
try this

Making an image fit to size of the html page using css

<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>

How to insert a Picture and fit it in <head> tag

this is my problem:
<!Demo html>
<html>
<head>
<img src="html\111.jpg" alt="can't be displayed" align="center">
</head>
<body>
</body>
and i just want to fit the picture onto the screen
If I understand your problem correctly, you want the image to cover the screen, then this is the simplest solution to your problem:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="html\111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</body>
But if your intention is actually to use the image as a background, I would strongly suggest adding it as a background image (with CSS) to the body element.
Edit:
With css:
html, body {
width: 100%;
height: 100%;
}
body {
background: url( html/111.jpg ) 100% 100%;
}
Also, don't forgot to link to your .css in your .html file.
<head>
<link rel="stylesheet" href="css/styles.css">
</head>
For inside a head tag......
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background: url(url of the image) !important; }
</style>
</head>
<body>
yourbody
</body>
</html
I think this is what you want!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<img src="html/111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</header>
</body>
In this snippet just replace src code with your link.
<!Demo html>
<html>
<head>
<style>
.img{
top:0px;
left:0px;
position:absolute;
height:100%;
width:100%;
}
</style>
</head>
<body>
<img src="http://wallpapersrang.com/wp-content/uploads/2015/12/wallpapers-for-3d-desktop-wallpapers-hd.jpg" alt="can't be displayed" align="center" class="img">
</body>

Element in iframe with height: 100% strech

I'm fighting with this problem:
I have iframe in which I'm showing website, which has some html structure. And inside this structure is element, which has css property: height: 100%;
Problem is, that element stretch to iframes full height, anyway it shouldn't I think. Could you give me some idea, how to solve this problem?
Here is source code for iframe content:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" />
</head>
<body>
<div id="overview">
<div class="overview slider swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
XXX
</div>
</div>
</div>
<div id="benefits">
<div class="grid">
<article id="article1" class="clearfix">
<div class="text col right">
<h2>People behavior in one picture</h2>
</div>
</article>
</div>
</div>
</body>
</html>
Here is source code, where I put an iframe:
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="1600" height="4000"></iframe>
</body>
</html>
Thank you very much for you help.
On the child page (the page inside the iframe) will be shown starting from the top left corner, so positioning the child page is usually not necessary. The styling of the iframe's dimensions on the parent page determines how much of the child page will be seen. The easiest and most effective way is to make the iframe responsive (able to adapt to changes of screen sizes and/or window)
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>
</body>
</html>

Height in percentage problem in HTML

When the following is rendered, the height parameter of image (img) isn't considered. However, if I vary the width in terms of % for example 80%, it resizes and aspect ratio is intact. If I mention height in terms of px it works. Problems occur only for height being in % and in all browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
If we remove "http://www.w3.org/TR/html4/loose.dtd" from doctype as shown below, % works for height but any padding given to image won't be considered in IE but works fine in rest of browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
I have tried using YUI 3 api for CSS Reset. While it removes all default padding of browsers, it wont solve my problem. Any workaround available ?
Thanks.
Adding the following CSS to my CSS file did the trick.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Thanks me :D