HTML - Iframe Affect Table Height, Possible?

I have a basic horizontal iframe with a persistent navigation header and a content page below which is the target for the navigation.

How do you set the height of the content frame to scroll if necessary depending on the amount of content on the page?

The content pages that are swapped in/out and have varying heights. I would like the page height overall to include all content.

Setting scrolling to "yes" in the <iframe> tag forces the content (framed) page height to about 100px(?), leaving a lot of dead space in the browser window below.

Ideally the whole page would scroll as one, but I would settle for scrolling just the content (framed) page.

Any help would be appreciated.
Thx

I'm having a bit of trouble with an iframe. I'm wanting my iframe to automatically adjust to the height of whatever page loads into it. Is that possible?

My code is as follows:
HTML Code:

<iframe src="test.html" name="_blank" width="656" height="100%"></iframe>

I'm building all the page that should load in the iframe to be the proper width, but I was hoping to make the iframe automatically adjust to the height.

Any help is greatly appreciated.

Hi All,

I have an iframe in my page.
I change its height from a button inside the iframe using javascript. for example:
parent.document.getElementById('iframe').style.height="100px";

The problem is that if the iframe height was 500px for example, and I changed it to 100px then the whole iframe is shrink down. I mean that the 100px are the top 100px but they are appear in the button of the iframe and there are 400px empty at the beginning. Any Idea how to change it?

Thanks in advance

The Situation:
I'm integrating a forum into my website with an Iframe. I want it to look good and scrollbars just don't cut it. I was hoping to find a script that could decide the height of the iframe base on the contents of the contents. In short, I want the iframes height to change according to the forum.

The Problem:
I found a lot of scripts that accomplished this, but with one major problem in all of them. When you go to a link within the Iframe the height stays the same. So if the original page is short and the page its linked to is longer, it cuts off.

The Site

The Explanation:
As you can see the script works nicely on the first page, but if you go to the post in the "Announcements" section the height stays the same and the post is cut off.

Does anyone know of a dynamic iframe height script capable of resizing again every time a page is loaded inside the iframe?

Hey.

I am using iframe inside my site, but i have to choose width and height myself.. when i set it to auto, i still have to scroll. Heres my site: http://habbxtra.net

HTML Code:

<iframe src="hjem_frame.php" width="450px"
height="1200px" name="mainframe" frameborder="0" scrolling="no"</iframe>

Ive tried changing height to auto and not setting a height at all, and setting the height to 100%, but when i change to 100% in width it wont show, and when i chane haight to 100% it doesnt do anything, just the same as width auto.

Thanks for any reply !

Please help me understand!
I'm trying to create a page that has several static height table rows and one row that has an iframe that I want to expand to fill the height of the browser window.

Here is a link to the test page:
http://dl.dropbox.com/u/9536793/testWITHframe.html

Here is the CSS used by the page:
http://dl.dropbox.com/u/9536793/test.css

Here is the page loaded into the iframe of the main page:
http://dl.dropbox.com/u/9536793/testblankframe.html

So, there are three rows at the top (Title, Menu, and Button rows). At the bottom are two rows (Bottom row and Copyright row).

In the middle is the row that contains the iframe that I want to fill the page height. It works correctly in Firefox 4 and Chrome. However, in IE 9 (standards mode), the frame is too tall, so a scroll bar is added to the page and the bottom area is pushed off the end of the window. Bah IE!! If I take off the DOCTYPE, or use an older DOCTYPE, IE goes into Quirks mode, and then the page appears correctly (sort of). However, I'm trying to use HTML 5 rules, so I want to just use DOCTYPE html. I also need IE in Standards mode so that a charting tool that I am trying to use wiill work right. I just can't get all of the technologies to play together!

Anyway, I know iframe are sometimes frowned upon, but we use a page layed out like this and then load various pages into the iframe based on what the user selects in the menu. I don't particularly like it either, but don't know a good alternative. (I'm open to suggestions for that as well).

Any assistance with getting the height to fill the page (and no more) that will work in all IE (8 and 9 standards mode), FF, and Chrome would be appreciated.

Thanks.

Hello.
I have a flash header on my page with links. When each link is pressed, the appropriate .html page is loaded into the iframe, which i have defined with this code:

Code:

<iframe name = "mainframe" src="home.html"
width="746" height="800"
frameborder="0"
align="middle">

The problem is, the different pages that will be loaded into 'mainframe' have different heights, and i would like the iframe to adjust to these heights without adding scrolling bars.

How would I do this?

I don't know if this question is posted somewhere, but I can't seem to find the answer I'm looking for.
I'm currently using iframe for my posting entries, and I can't figure out the script for auto height. I'm tired of setting the height by hand, every time my entries starts to stretch. Now regarding the width, would that be possible too? if not, I'm not too concerned. Most important is the height.

If anyone have the answers to this please reply. Thanks in advance! (:

I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this?

Here's what I'm dealing with, visually:



Any help would be welcome. Thanks.

Hello there,

I am pretty new to web programming. I am currently having problem with Iframe's height.

here's what happen. I have a page with 2 Div. First div is the header with menu. The 2nd Div Contains 2 Iframes. The first Iframe is my title bar location, and the 2nd iframe is my content location. The menu and title bar location is fine. When I click on something from the menu bar, it changes both the title bar and the content page. I did it like this because I don't want my title bar to scroll up when my content page is longer.

So here's my problem: for the 2nd Iframe which contain my content, I couldn't set the height properly so it will fill and extend to the bottom of the screen when resolution is high. Also i don't want a scroll bar to the whole website, but only to the 2nd iframe. here's an example. I made a very simple version of what is exactly my problem. So is easier to read on the forum.

index.html's code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>


<body scroll="no">

<div id="apDiv1" scrolling="no">
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</div>

<div id="apDiv2" scrolling="no">
<iframe src="123.html" style="position:absolute; width:780px; height:35px; top:240px;" scrolling="no"> </iframe>
<iframe src="abc.html" style="position:absolute; width:780px; height:100%; top:275px;" scrolling="yes"> </iframe>
</div>

</body>
</html>


123.html's code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
1234567
</body>
</html>


abc.html's code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
</body>
</html>


Notice, I have a long TEST there. because i want only the iframe to scroll, but not the whole website.

Anyone know a solution to this?

Hi,

I'm trying to add scrolling affect to my website using marguee tag but nothing work can somebody help me with this?

this is the script

<VAR_MAIN_TITLE>%%TEXT_LATEST_JOBS%%</VAR_MAIN_TITLE>
<VAR_MAIN_HEADER_HEIGHT>0</VAR_MAIN_HEADER_HEIGHT>
%%MAIN_HEADER%%
<table bgcolor="%%LIST_BORDER_COLOR%%" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<table bgcolor="%%LIST_BORDER_COLOR%%" width="100%" border="0" cellspacing="1" cellpadding="2" class="tablelist">
<tr bgcolor="%%LIST_HEADER_COLOR%%">
<th width="15%">&nbsp;%%TEXT_POST_DATE%%&nbsp;</th>
<th width="28%" align="center">&nbsp;%%TEXT_TITLE%%&nbsp;</th>
<th width="28%" align="center">&nbsp;%%TEXT_JOBCATEGORY%%&nbsp;</th>
<th width="28%" align="center">&nbsp;%%TEXT_LOCATION%%&nbsp;</th>
</tr>
<marquee WIDTH=100% BEHAVIOR=scroll SCROLLAMOUNT=3 DIRECTION=up BGColor="">

<BEGIN REPEAT>

<tr bgcolor="%%TABLE_LINE_BGCOLOR%%">
<td width="15%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_JOBDATE%%</a></td>
<td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_JOBTITLE%%</a></td>
<td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_CATEGORY%%</a></td>
<td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_LOCATION%%</a></td>
</tr>
<END REPEAT>

</MARQUEE>

<BEGIN NORESULT>
<TR>
<TD colspan="4" align="center" valign="middle" bgcolor="%%TABLE_LINE_BGCOLOR%%"><font class="default_text"><b>%%TEXT_NO_RESULT%%</b></font></TD>
</TR>
<END NORESULT>
</table>
</td></tr>
</table>
%%MAIN_FOOTER%%

Ok. I have just created a website using dreamweaver. This is not my first website but it is the only website i have done using html. I used to use CMS. In dreamweaver i have added library elements and inserted my google ad-sense codes into the library elements. I did this so i can change the advertisment now and again and for the convenience. Lets face it updating adverts for over 100 pages can be a dawnting task. This was why i used the library element. I am just wondering whether this will affect the amount of revenue that i am going to recieve from google ads? Would i have been better putting adverts seperatly on each of my web pages?

Thanks, Ben Padgett

This is really strange. If I write my code like this,
---------------
<td style="height: 100% width 16px; background-image: url('widgets/gen_72.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td></tr>
<tr><td width="16" height="17"><img src="widgets/gen_76.1.gif" border=0 width=16 height=17 alt=""></td>
<td style="height: 17px width 100%; background-image: url('widgets/gen_69.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td>
<td style="width: 16px height 17px; background-image: url('widgets/gen_75.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="17" alt="widget></td></tr></table>
---------------

my page displays correctly. But if I simple move the end tags for the table like this,

-----------------------
<td style="height: 100% width 16px; background-image: url('widgets/gen_72.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td></tr>
<tr><td width="16" height="17"><img src="widgets/gen_76.1.gif" border=0 width=16 height=17 alt=""></td>
<td style="height: 17px width 100%; background-image: url('widgets/gen_69.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td>
<td style="width: 16px height 17px; background-image: url('widgets/gen_75.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="17" alt="widget">

</td></tr></table>

-------------

the page adds an extra table image below the table. Just adding a space before the </td> tag throws off the results. How can this be? I've never had a web page do this before. Can someone explain this to me? It simply doesn't make sense? Am I doing something wrong that I'm not seeing?

Thanks

Hi,

I am looking to get a table along the side of my page to stretch from top to bottom.

I tried

<table height="100%">

and

.high {height:100%}
...
<table class="high">

but it didn't work it only shows until the end of the table's content. Is there a way to do this?

Thanks

I have a table row with a form with several buttons. The row is twice the height of the buttons and I haven't been able to control the height. Here is snippet:
<html>
<head>
</head>
<body>
<center>
<table border='1' cellpadding='0' cellspacing='0'>
<tr>
<td align='center'>
<form>
<input type='button' value='Prev month' id='btnPrevID' onClick='MonthYearChange("prev")'>&nbsp;
<input type='button' value='Next month' id='btnNextID' onClick='MonthYearChange("next")'>
<input type='button' value='Change Mo/Yr' id='btnChgID' onClick='DropDownChangeMonthYear()'>
</form>
</td>
</tr>
</table>
</body>
</html>