CODEWITHSUNDEEP
htmlcssiframe
Sharid
Sharid

Reputation: 41

iFrame width-100% Height-100%

I was hoping someone could help me, as I have limited html knowledge. I am using an iFrame to open up other pages internal and external. I have got the iFrame to open up width 100% and height 100%, however I am having the following problems and was hoping someone could tweak my code.

I have a header, then iFrame and then a grey footer. My problem is this

  1. The footer does not move down when the iframe opens a child page, this causes an extra scrollbar to appear, one for the iFrame the other for the footer.

  2. I child page is not showing fully in the iFrame, its footer seems to be slightly clipped at the bottom.

  3. Is there a way no to have any scroll bars and the iframe to expand fully to the child page size

See example below - With Grey Footer

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Page</title>
    <meta name="generator" content="Web Builder 11">
    <link href="css/inline_frame.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="container">
      <iframe name="InlineFrame1" id="InlineFrame1" style="position:fixed;left:0px;right;0px;bottom:0px;top:95px;width:100%;height:100%;z-index:1;" src="./page1.html"></iframe>
    </div>
    <div id="PageHeader1" style="position:absolute;text-align:left;left:0px;top:0px;width:100%;height:100px;z-index:7777;">
      <div id="wb_CssMenu1" style="position:absolute;left:30px;top:70px;width:375px;height:30px;z-index:0;">
        <ul>
          <li class="firstmain"><a href="./page1.html" target="InlineFrame1">Item&nbsp;1</a></li>
          <li><a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1">Item&nbsp;2</a></li>
          <li><a href="http://www.aljazeera.com/news/" target="InlineFrame1">Item&nbsp;3</a></li>
          <li><a href="http://www.bbc.co.uk/news" target="InlineFrame1">Item&nbsp;4</a></li>
        </ul>
      </div>
    </div>
    <div id="PageFooter1" style="position:absolute;overflow:hidden;text-align:left;left:0px;top:530px;width:100%;height:210px;z-index:2;">
    </div>
  </body>
</html>

In the second example below I have removed the footer but still have problems 2 and 3 from above. I do want my own footer

No Footer

<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Page</title>
    <meta name="generator" content="Web Builder 11">
    <link href="css/inline_frame.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="container">
      <iframe name="InlineFrame1" id="InlineFrame1" style="position:fixed;left:0px;right;0px;bottom:0px;top:95px;width:100%;height:100%;z-index:1;" src="./page1.html"></iframe>
    </div>
    <div id="PageHeader1" style="position:absolute;text-align:left;left:0px;top:0px;width:100%;height:100px;z-index:7777;">
      <div id="wb_CssMenu1" style="position:absolute;left:30px;top:70px;width:375px;height:30px;z-index:0;">
        <ul>
          <li class="firstmain"><a href="./page1.html" target="InlineFrame1">Item&nbsp;1</a></li>
          <li><a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1">Item&nbsp;2</a></li>
          <li><a href="http://www.aljazeera.com/news/" target="InlineFrame1">Item&nbsp;3</a></li>
          <li><a href="http://www.bbc.co.uk/news" target="InlineFrame1">Item&nbsp;4</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

I would greatly appreciate if anyone could tweak my code

Upvotes: 3

Views: 9077

Answers (2)

mlegg
mlegg

Reputation: 832

Try this code, you may want to mess with the padding bottom and top a bit to suit your needs:

.flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.flexible-container iframe,   
.flexible-container object,  
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="http://lifehacker.com/"></iframe>
</div>

Upvotes: 3

Noni
Noni

Reputation: 369

   <!--</div>-->

<div id="PageHeader1" style="width:100%;">
    <div id="wb_CssMenu1" style="width:375px;height:auto;z-index:0;">
        <ul>
            <li class="firstmain">
                <a href="./page1.html" target="InlineFrame1">Item&       nbsp;1</a>
            </li>
            <li>
                <a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1">Item&nbsp;2</a>
            </li>
            <li>
                <a href="http://www.aljazeera.com/news/" target="InlineFrame1">Item&nbsp;3</a>
            </li>
            <li>
                <a href="http://www.bbc.co.uk/news" target="InlineFrame1">Item&nbsp;4</a>
            </li>
        </ul>
    </div>
</div>
<!--</div>-->
<!--</div> 2-->

<div id="container">


    <iframe name="InlineFrame1" id="InlineFrame1" style="width:100%;    min-height:100vh;height:100%"  frameborder="0"        scrolling="auto" src="http://www.bbc.co.uk/news"></iframe>


</div>
<!--</div> 2-->
<!--div 3-->
<div id="PageFooter1" style="position:relative; overflow:hidden;text-align:left;width:100%;height:210px;">
    <h1>footer</h1>
</div>
<!--div 3-->

try this does that you want ?? if not tell me where i am wrong

Upvotes: 1

Related Questions