Is there a way to make the height of the <iframe> reach exactly the bottom of the page? It is hard to judge by using height:xx%, and it might be dependent on browser.
The code is below:
<!DOCTYPE html>
<html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%"></iframe>
</body>
</html>
Using JavaScript/jQuery, you can precisely set the right dimension for the IFRAME element, without the need to access to DOM of the frame itself (cross-domain issues), relying on tables or absolute positioning (useless if the content above the frame is dynamic in height):
$(function() {
var aboveHeight = $("#aboveFrame").outerHeight(true);
$(window).resize(function() {
$('#frame').height( $(window).height() - aboveHeight );
}).resize();
});
Example: http://jsfiddle.net/hongaar/jsdYz/
As annoying as it is to use tables for layout, they're still the best way to consistently handle vertical dimensions. The following still displays a few white pixels around the edge of the iframe, and has an extra scrollbar in some versions of Firefox, but is as close as I've been able to achieve:
<!DOCTYPE html>
<html style="padding:0; margin:0; height:100%">
<body style="padding:0; margin:0; height:100%">
<table style="border:0; padding:0; margin:0; height:100%; width:100%">
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0">
<p style="margin:10px"> hello </p>
</td>
</tr>
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0; height:100%">
<iframe src="http://www.weather.com" style="border:0; padding:0; margin:0; width:100%; height:100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
If you really want to avoid the table elements, you might get some traction out of div tags with display:table, display:table-row, and display:table-cell, but be prepared for even more annoying quirks in certain browsers.
<!DOCTYPE html>
<html style="height:100%">
<body style="margin:0; >
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:100%"></iframe>
</body>
</html>
Well, this seems to be a tricky but you have to keep <html> OR <body> tag height 100% to achieve this
If your <p> tag content is fixed then you can try this way by adjusting the height of <p> and <iframe> relatively..and you have to keep <html> OR <body> tag height 100% otherwise it wont work
I had this same problem recently. I believe you are wanting to expand the height to fit the content that is dynamically loaded. This works like a dream. :)
<!--This script will auto size the height. Must set the id for it to work.-->
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
}
else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
Iframe which is a child to the body element is of 100% height with it's parent and before you can make iframe full page you have to declare the height of the body and make it full page too.
Try this. (I thought it would be better if you put your CSS in an external file or just inside the head)
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {height:100%;}
iframe {height:100%;width:100%;}
</style>
</head>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com"></iframe>
</body>
</html>
Demo
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
#divHeader
{
height:25px;
}
#divContent
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
height:100%;
width:100%;
margin-top:-25px;
padding-top:25px;
overflow:hidden;
}
iframe
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="divHeader">
header
</div>
<div id="divContent">
<iframe src="http://www.weather.com"></iframe>
</div>
</body>
</html>
you can't. I tried this before, but it is an issue with the iframe it will remain this way, until they find a way to expose the height of the inner html document... following the standards. If you remove the DOCTYPE of the inner document, I guess you'll have some access to it. Make Iframe to fit 100% of container's remaining height
Try this...
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<iframe src="http://www.weather.com" onload="this.height = document.body.offsetHeight;"></iframe>
</body>
</html>
You could check the demo here
I have always used height:100vh; to give you 100% of the view port
Related
I need to create a little html code that I will use in sharepoint in script editor. The idea is that I have some report from Microsoft BI in iframe (changed the address in code below) and it works fine. But I want to cover the "share buttons" in the bottom right of the site, so it can't be shared. The iframe should fill the whole WebPart in sharepoint, so I tried to allign the image simply to bottom right corner, but it doesn't seem to work. Any ideas?
<html>
<head>
</head>
<body>
<iframe src="https://www.google.pl/?gfe_rd=cr&ei=x5UEWO-yGaOh8welvY2IAQ" width="100%" height="700">
</iframe>
<img src="logo.jpg" align="bottom" align="right">
</body>
</html>
Ok, I've finally got it working. The "TOP" variable is static, it's the height of the displayed website minus the height of the image itself. Here is the code:
<html>
<head>
</head>
<body>
<div style="height:750px; position:relative">
<iframe style="border:none; width:100%; height:700px; z-index:1" src="website.com"></iframe>
<img style="top:663px; right:0px; position:absolute; z-index:9" src="testbar2.jpg">
</div>
</body>
</html>
The align attribute of <img> is not supported in HTML5. Use CSS instead.
img {
float: right;
}
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
i was going through this tutorial, to allign two images inside a dive vertically so that there is no space between them, please take a look
http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/
i wrote my code like this
<head>
<style type=”text/css”>
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
</div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>
but it didnt workrd as shown in the second pic shown in the link i specified.
What am i doing wrong here.
i want them as two pics alined vertically without any space.
please help
Please replace your quotes with the right ones, “ is not ".
The code is missing doctype and opening html-tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class="imgclass">
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>
Your result should look like this:
http://pbrd.co/1qt52ku
Tested in Chrome. Other browser may need fixes via line-height, margin, and padding.
I'm looking to make a custom CSS webpage, but I'm having difficulty getting all the pictures to show unless I make the min-height around 900px. The index code looks like this,
<head>
<style type="text/css">
#import url("stylesheets/mystyle.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Small Biz Labs</title>
</head>
<body>
<div class="wrap">
<div class="conatiner" align="center">
<div class="header">
<center>
<img src="images/logo.png" width="200" height="100" />
</center>
</div>
<div class="text">
<h1>Maybe a header</h1>
<p>some text</p>
</div>
</div>
</div>
</body>
</html>
and the CSS code looks like this...
/*
Document : mystyle
Created on : Jul 18, 2012, 1:12:14 PM
Author : someguy
Description:
Purpose of the stylesheet follows.
*/
html {
background:url(../images/bodybackground.jpg) repeat;
margin:0px;
max-height:100%
}
body {
background:url(../images/paperbackground.jpg) repeat-y center;
margin:0px;
margin:0px;
max-height:100%;
}
.wrap {
background:url(../images/new_backdrop.png) repeat-x center bottom fixed;
margin:0px;
min-height:1050px;
}
.container {
max-width:600px;
}
.header {
}
.text {
text-align:left;
max-width:600px;
padding-left:10px;
}
I'm trying to get the bottles to float over the two textures I made. Allowing for text/images etc. to be placed in the smaller lighter version of the paper texture. So far I can only make this happen if I set the max-height large enough. Any suggestions on how to adjust my code?
The images I'm using can't be posted until I get more points, but if you want to see them let me know and ill shoot you the jpgs and the one png (the one that floats).
If you want to see a semi live version
jsfiddle: http://jsfiddle.net/wKtGv/
Try adding height:100%; to both body and .wrap
http://jsfiddle.net/wKtGv/13/
I have a simple html page where i have a centered "stretchy" header. I want to have a centered logo on top of it. I'm using align="center" in the div tag to achieve centering. When I use z-index on the logo, it doesn't work unless I change position:relative to position:absolute, which breaks the centering that I have. I'm testing it in chrome 8.0.552.224 and FF 3.6.13
<!DOCTYPE html>
<html>
<head>
<title>Vassily's page!</title>
<style type="text/css">
* {margin:0; padding:0;}
table {border-collapse:collapse;}
body {background:white url("bg.png") top repeat-x fixed;}
#bar {opacity: .8;}
#bar_stretch {height:150px; width:55%;}
IMG#logo {position:relative; top:0px; z-index:10;}
</style>
</head>
<body>
<div align="center">
<img id="logo" src="logo.png">
</div>
<div id="bar" align="center">
<img src="bar_left.png"><img src="bar_center.png" id="bar_stretch"><img src="bar_right.png">
</div>
</body>
</html>
I've tested this in IE7, IE8, Firefox 3.6.13, Chrome dev (no IE6!):
Live Demo
(I had to use stupid images that actually exist or you can't view the demo properly in Firefox)
HTML:
<div id="logocontainer"><img id="logo" src="logo.png" /></div>
<div id="bar">
<img src="bar_left.png" /><img src="bar_center.png" id="bar_stretch" /><img src="bar_right.png" />
</div>
CSS:
* {margin:0; padding:0}
table {border-collapse:collapse}
body {background:white url("bg.png") top repeat-x fixed}
#bar {opacity: .8; text-align:center}
#bar_stretch {height:150px; width:55%}
#logocontainer {width:100%; position:absolute; text-align:center; z-index:1}
#logo {margin-top:30px; width:123px; height:72px}
This would be a whole lot cleaner if you could use CSS backgrounds instead of <img> in a few places.