SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Dec 2001
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question iFrame 100% Height

    Is it possible to have an iFrame set at 100% so that you will not need to scroll up or down inside the actual page? I have been searching for a while now and one thing to note is that the source file is from another web site (with permission) and is https on an http page. The code works fine but I cant seem to get the 100% height. Can anyone help me out?

    Here is what I have so far:

    iframe {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
    }

    I used this code on the iframe and it caused the iframe to go over the top of the rest of the design instead of fitting in the middle of the design and above the footer. Am I missing something?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you remove position:absolute it won't go above everything but then it won't have 100% height because the parent element would need a set height too. Can you show an example so I can toy around with it?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict
    Join Date
    Dec 2001
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML 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>
    <style type="text/css">
    <!--
    iframe {
     position: absolute;
     overflow: hidden;
     height: 100%;
     width: 100%;
    }
    -->
    </style>
    </head>
    <body>
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr bgcolor="#999999">
        <td height="200">This would be a title</td>
      </tr>
      <tr>
        <td>
          <iframe src="http://www.sitepointforums.com">
          <p>Frame does not work.</p>
          </iframe>
        </td>
      </tr>
      <tr bgcolor="#999999">
        <td height="200">This is the footer</td>
      </tr>
    </table>
    </body>

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You want the iframe the full page but you don't want it overlapping other stuff? That's a paradox. Anyway do you mean something like this?

    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>
    <style type="text/css">
    
    iframe {
     width: 100&#37;;
    }
    </style>
    </head>
    <body>
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr bgcolor="#999999">
        <td height="200">This would be a title</td>
      </tr>
      <tr>
        <td>
          <iframe src="http://www.sitepoint.com/forums">
          <p>Frame does not work.</p>
          </iframe>
        </td>
      </tr>
      <tr bgcolor="#999999">
        <td height="200">This is the footer</td>
      </tr>
    </table>
    </body>
    </html>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict
    Join Date
    Dec 2001
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works to make it show the whole page for the width, but I want to show the entire page in the middle of the design without a scrollbar and so that the height adjusts for the height of the frame.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    To have the entire sites contents within the page without scrollbars (even if the actual page needs it) isn't possible I believe...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It isn't without scripting - I suspect you just need to take the inner frame's documentElement.clientHeight and apply it to the iframe, assuming the BOM allows it in regards to domain restrictions.
    Cross browser css bugs

    Dan Schulz you will be missed

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I think it wouldn't allow that due to security restrictions. It could imitate other sites (typos in the URL) and make it seem like the actual site. Not that the OP would do that but I'd think it could be a security risk.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I think it wouldn't allow that due to security restrictions.
    And this is why I had:

    assuming the BOM allows it in regards to domain restrictions.
    At the end of my post.
    Cross browser css bugs

    Dan Schulz you will be missed

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just explaining the reasoning behind why I thought it wouldn't be allowed.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used this code on the iframe and it caused the iframe to go over the top of the rest of the design instead of fitting in the middle of the design and above the footer.
    You said your laying Iframes on top of the design? Why are you using frames in the first place if it's a design?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    And make it seem uncanny like the other site
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •