dcsimg
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 2 of 2

Thread: iframe not display correctly

  1. #1
    Join Date
    Mar 2006
    Posts
    228

    iframe not display correctly

    Hello,

    I am having problems trying to display a iframe in a window.

    When I view it on a smaller screen or even when the window is not maximized it don't display the same.

    The page scroll bar seems to be half way down the screen when not maximized.

    So the question is as I have a header already how can I make the iframe the height of the page minus the height of the header and display it under the header.

    CSS (style):
    Code:
    
    body{
    margin:0;
    padding:0px;
    line-height: 1.5em;
    padding-bottom:10px;   /* Height of the footer */
    overflow-y:hidden;
    overflow-x:hidden;
    
    } 
    
     
    div#right{ 
      height:80% 
    }
    
    
    
    fieldset
    {
         border: 1px solid #C1C1C1;
    	 font-size: 12px;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	  
    }
    
    .1{
        display: block;
        float: left;
        width: 10em;
    }
    
    .2{
        display: block;
        float: left;
        width: 7em;
    }
    
    
    
    
    
    
    b{font-size: 110%;}
    em{color: red;}
    
    
    #topsection{
    background: #EAEAEA;
    background-image:url(gray_top.png);
    height: 90px; /*Height of top section*/
    }
    
    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    }
    
    #contentcolumn{
    margin-left: 250px; /*Set left margin to LeftColumnWidth*/
    }
    
    #leftcolumn{
    float: left;
    width: 250px; /*Width of left column*/
    height: 750px; /*Height of left column*/
    margin-left: -100%;
    background: #EBEAE0;
    margin-top: 0;
    }
    
    #foo {
        position:fixed;
        bottom:0;
        height:130px;
        width:100%;
        background:red;
    }
    
    #footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: left;
    padding: 5px 5px;
    height: 10px;
    
    }
    
    #footer a{
    color: #FFFF80;
    }
    
    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }
    index.htm
    Code:
    <html>
    
    <BODY scrolling="no"> 
    
      <link rel="stylesheet" type="text/css" href="style.css" />
    
      
    	<div id="topsection">
    	    <div class="innertube">
    			<img src="logo.png">
    		</div>
    	</div>
    		
    	<div ID="menu" STYLE="background-color:#F2F2F2; height:600px; width:250px; float:left;">
    		<div style="background-color:#F2F2F2; border:0px solid gray; width:250px; height:80%; margin-bottom: 1em; padding: 10px">
    			Item 1 <br>
    			Item 2 <br>
    			Item 3 <br>
    		</div>
    	</div>
    	
    	<div ID="right" STYLE="background-color:#EEEEEE; height:80%; float:left;">
    		<iframe src="test.htm" NAME="test_page" width="100%" height="100%" frameborder="0"></iframe>
    	</div>
    	
    	<div id="footer">
    			Version: 1.0.0
    	</div>
    
    	
    
    </BODY> 
    </html>

    test.htm
    Code:
    Line 1 <br>
    Line 2 <br>
    Line 3 <br>
    Line 4 <br>
    Line 5 <br>
    Line 6 <br>
    Line 7 <br>
    Line 8 <br>
    Line 9 <br>
    Line 10 <br>
    Line 11 <br>
    Line 12 <br>
    Line 13 <br>
    Line 14 <br>
    Line 15 <br>
    Line 16 <br>
    Line 17 <br>
    Line 18 <br>
    Line 19 <br>
    Line 20 <br>
    Line 21 <br>
    Line 22 <br>
    Line 23 <br>
    Line 24 <br>
    Line 25 <br>
    Line 26 <br>
    Line 27 <br>
    Line 28 <br>
    Line 29 <br>
    Line 30 <br>
    Line 31 <br>
    Line 32 <br>
    Line 33 <br>
    Line 34 <br>
    Line 35 <br>
    Line 36 <br>
    Line 37 <br>
    Line 38 <br>
    Line 39 <br>
    Line 40 <br>

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,943

    Re: iframe not display correctly

    Unless you're giving all the elements percentages, you will have to use JavaScript to calculate the screen height and then subtract the height of the top navigation bar.

    http://www.javascripter.net/faq/browserw.htm
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

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


Windows Mobile Development Center


Click Here to Expand Forum to Full Width




On-Demand Webinars (sponsored)