Jump to content

height="100%" Causing Issues...


Recommended Posts

I'm constructing a website avoiding any usage of frames. However, I'm using plenty of <iframes>. The top portion of the page is for navigation, a simple table with drop-down menus. Below that, I'm attempting to script a simple <iframe> that takes up the remaining width and height of the page below the title navigation. The width="100%" setting is working perfectly, but the height="100%" either makes the iframe vanish, or appear at seemingly random heights. At first, I attempted something as simple as this:

<iframe src="Homepage.htm" width="100%" height="100%" />

Unhappily, this didn't work. In Firefox, the iframe was about 150px high, and in IE, the iframe was about 150px too high, meaning there were 2 active scrollbars next to each other. I could trial & error this all night, but I'd rather post now and learn if there's something else I should be doing. Thanks.

Link to post
Share on other sites

Okay let me go about this another way...PageTestingQuestion.gifThe dark grey area is the top of the webpage I'm attempting to create (obviously generic just to show the basics). If a page is extremely high with content, it is OK if the title scrolls off the page, although, I'd prefer for it to be stationary. The links are essentially roll-overs which bring up a list of further sections. When these links/sections are clicked, the LIGHT grey area changes depending on the content selected.Ok, so what I'm after is this: Based upon what you see here, what is the best way to go about creating this website? Frames would work, yes, but not with the rollovers I'm using, so that's a no. IFrames might work, but I'm having difficulty with the height attribute. If there's any other way you know how to do it, I'm all ears (eyes), even if it's some language I have no clue about (everything besides HTML, CSS & JavaScript).Thanks!

Link to post
Share on other sites

so you want the top area (dark grey) to be a fixed width and height and you want it to stay at the top of the page if the content that is loaded in the lower area (light grey) goes below the page fold. So basically, the lower (ligth grey) area is your <iframe>?so your problem is with the hieght and the scroll bars?

Link to post
Share on other sites
Guest jvalick

There is a simple solution to your problem. Use a table.1. Set both frames within one cell of a table. 2. Set your height and width of the table to "100%".3. Set your first iframe to it's desired height Ex: "100px" and the width to "100%".4. On your second iframe set the width and height to "100%".You are done.EXTRA:If you want to get rid of the margins surrounding your table, add a CSS script(which i have provided in the example below) to the <head> of the document that will configure the margin width of the body and the table.EXAMPLE CODE:

<html><head><title>mypage</title><style type="text/css">body, table {margin: 0;}</style></head><body><table cellspaceing="0" cellpadding="0" border="0" height="100%" width="100%"><tr> <td>  <iframe src="http://www.yahoo.com" height="100px" width="100%" frameborder="0"></iframe>  <iframe src="http://www.w3schools.com" height="100%" width="100%" frameborder="0"></iframe> </td></tr></table></body></html>

Enjoy!!~Val

Link to post
Share on other sites
There is a simple solution to your problem. Use a table.1. Set both frames within one cell of a table. 2. Set your height and width of the table to "100%".3. Set your first iframe to it's desired height Ex: "100px" and the width to "100%".4. On your second iframe set the width and height to "100%".
Actually, I had tried something similar along those lines, except the primary navigation wasn't using an iframe, and that didn't work. I seem to have found a different solution, however. The top navigation will remain consistent on each page of the website, including the forum, and under this train of thought, each page should simply link to or include it, and I've found a simple way to do this with php:
<?php include ("navigation.php"); ?>

Where index.htm is now index.php instead. This way, the external php document is included in the top area for the menu. The remaining pages fall by default below the top navigation. This way, I see no apparent need for an iframe for page content. I'm still constructing this, so who knows what else I'll stumble on, but thanks for the suggestions and help.

Link to post
Share on other sites
so you want the top area (dark grey) to be a fixed width and height and you want it to stay at the top of the page
I've pretty much given in to having the navigation scroll off the page with the rest of the content for long pages. Other than the usage of frames, which I'm completely avoiding this time around, I know of no other way to have a stationary navigation bar at the top of a webpage. Unless... do z-index layers have the ability to separate themselves from the scrolling of lower layers of content?
Link to post
Share on other sites

have you search the forum for "scrolling div" cuz that was where I was going with my post after I was able to confirm that you wanted a stationary header but scrollable content.Here is an example:http://w3schools.invisionzone.com/index.ph...findpost&p=3872

Link to post
Share on other sites
have you search the forum for "scrolling div" cuz that was where I was going with my post after I was able to confirm that you wanted a stationary header but scrollable content.
I hadn't heard of that until now actually, I'll give it a shot. Would you happen to know if a link to alternate content can be loaded within the div just like an iframe? Like this...
<a href="link.htm" target="divname">LINK</a> where <div name="divname">(replaced content)</div>

I gave that a shot, but it opened up the link in a new window.

Link to post
Share on other sites

Nuts... and for the record:

<div style="height: 100%; width: 100%; overflow: auto">(blah blah blah)</div>

Has the same dimension problems as the iframe did. The overflow feature didn't apply to only viewable browser area, it extended all the way down to the end of the content. On top of that, a horizontal scroll bar was visible if the div had: a border, padding, or any margins.

Link to post
Share on other sites
<table cellspaceing="0" cellpadding="0" border="0" height="100%" width="100%"><tr> <td>  <iframe src="http://www.yahoo.com" height="100px" width="100%" frameborder="0"></iframe>  <iframe src="http://www.w3schools.com" height="100%" width="100%" frameborder="0"></iframe> </td></tr></table>

I gave this a shot, but I'm sorry to say I run into the same problem as I do using regular frames. The menu iframe (the top one) has drop-down menus that MUST overlap any content below it. So in other words, since the menu can't break free of the boundaries of the iframe, it must be contained within normal page content in order to overlap all content - iframes or otherwise. Thank you for the suggestion though.
Link to post
Share on other sites
Nuts... and for the record:
<div style="height: 100%; width: 100%; overflow: auto">(blah blah blah)</div>

Has the same dimension problems as the iframe did.  The overflow feature didn't apply to only viewable browser area, it extended all the way down to the end of the content.  On top of that, a horizontal scroll bar was visible if the div had: a border, padding, or any margins.

a.) is any of your code available to view?b.) i'll post your other question tomorrow from work, but yes you can have a text link easily replace/change some content within a div.
Link to post
Share on other sites
a.) is any of your code available to view?
This is my current code:
<?php include ("PHP/doctype.php"); ?><html><head><?php include ("PHP/head.php"); ?></head><body><?php include ("PHP/navigation.php"); ?><iframe src="iframe.htm" style="height: 100%; width: 100%"></iframe></body></html>

b.) i'll post your other question tomorrow from work, but yes you can have a text link easily replace/change some content within a div.
Are you referring to hidden/visible abilities or something else? I suppose it's a moot point to some extent if the div has equal issues when height="100%".I did some searching for this issue elsewhere on the web and found this link... I suppose it only confirms the problem is universal: Link.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...