CODEWITHSUNDEEP
htmliframe
friedkiwi
friedkiwi

Reputation: 2198

How to make the size of the IFRAME the size of the container?

<td width="120" valign="top" height="100%">
   <iframe src="menu.php" width="100%" height="100%" frameborder="0">
   </iframe>    
</td>

This code always gives the default size of an iFrame in my browser (same as:

<iframe src="menu.php">
</iframe>

) I want the IFrame to get the size of the container cell.

I know I can use PHP for it to include a file on that place, but I want to create a long menu with scrollbars. Another solution to accomplish this would be nice too, because personally, I don't like IFrames.

Thanks,

Yvan

Edit: Now I've got this, and it doesn't display the div:

<html> 
<head > 
    <title>Untitled Page</title> 
    <style type="text/css"> 
        .scroller { height:100%; overflow:auto; }
    </style> 
</head> 
<body style="background-color: #7C70DA; font-family: Fixedsys, Courier, Courier New; text-align:center; vertical-align:center;"> 
    <center> 
        <div style="position:absolute; left: 40px; right:40px; top: 40px; bottom:40px; background-color: #3931A5; vertical-align:middle; color: #7C70DA "> 
            <table border="0"> 
                <tr> 
                    <td width="160" valign="top" height="100%"> 
                        <div class="scroller"> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 

                        </div>  
                    </td> 
                    <td width="100%" valign="top"> 

                    </td> 
                </tr> 
            </table> 
            <br /> 
            (c) YVAN JANSSENS 2010      </div> 
    </center> 
</body> 
</html>

Upvotes: 2

Views: 585

Answers (2)

jeroen
jeroen

Reputation: 91734

In your second attempt you need to take the .scroller div out of the table, then it works, at least in Firefox 3.6.

Either way, the div is shown. What browser are you using?

I would also declare a doctype.

Upvotes: 1

Sampson
Sampson

Reputation: 268344

You can place the menu contents in a div, set the height of the div, and the overflow value to auto or scroll. As a side note, I'd like to encourage you to abandon this use of tables in HTML, and instead consider a CSS framework like the 960 Grid System for your layouts.

.scroller { height:500px; overflow:auto; }

--

<div class="scroller">
  <ul>
    <li>Options</li>
    <li>Options</li>
    <li>Options</li>
    <li>Options</li>
    <li>Options</li>
    <li>Options</li>
  </ul>
</div>

Upvotes: 3

Related Questions