1

I want two horizontal areas in my webpage. The first one is the menu. It's on the top. Unfortunately I don't know its size, and it might change in response to user actions. Below the menu is the main area which should stretch at least as far as the bottom of the window (if there is little content) or beyond (if there is a lot of content.

To illustrate with ASCII art:

+----------------------------------------------------+
| This area resizes vertically depending on contents |
+----------------------------------------------------+
| This area stretches to the bottom of the window,   |
| but can be even larger if necessary. Note: this    |
| should be a separate area because it will contain  |
| children with height:100% as well.                 |
|                                                    |
+----------------------------------------------------+

Can this be done? Can it be done with Javascript?

Added: To put things in perspective and avoid confusion, think of it this way: the top menu is generated by myself, but the bottom area is an IFrame which I want to fill the rest of the page. This is what it eventually comes down to anyway in my case.

3 Answers 3

1

I would not use iframes because they are outdated. Instead you could use jQuery UI or/and some CSS.



ASP.NET

You can use a "PDF viewer".

Could you use WPF for web...

Otherwise...


jQuery UI

Here is a link to functionality that you could be interested in: http://jqueryui.com/demos/tabs/#default


CSS fun!

Here is an example of what you could do with some CSS.

style.css

.menuTop
{
   position: relative;
   margin: 0 auto;
   background: #F00;
   height: 30px;
   width: 1024px;
   height: auto;
   text-align: center;

}

.frame
{
   position: relative;
   background:#F90;
   text-align: center;
   width: 1024px;
   height: 720px;
   overflow: scroll;
   margin: 0 auto;
}



.frameContent
{
 position: relative;
 height: auto;
 background:#09F;
 text-align: left;
}

.html

    <!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>Test</title>
                <link type="text/css" rel="stylesheet" href="style.css" />
            </head>
            <body>
        <div class="menuTop">
           Your menu here...
         </div>
        <div class="frame">

            <div class="frameContent">
                <p>H</p>
                <p>E</p>
                <p>L</p>
                <p>L</p>
                <p>O</p>

                <p>W</p>
                <p>O</p>
                <p>R</p>
                <p>L</p>
                <p>D</p>
                <p>!</p>

                <p>I</p>
                <p>S</p>

                <p>T</p>
                <p>H</p>
                <p>I</p>
                <p>S</p>

                <p>C</p>
                <p>O</p>
                <p>O</p>
                <p>L</p>
                <p>!</p>
            </div>
        </div>

    </body>
</html>
5
  • ... and if you have to display a .PDF file inside your webpage?
    – Vilx-
    Jun 11, 2010 at 14:37
  • @Vilx: Are you using a server side language?
    – Alerty
    Jun 11, 2010 at 14:48
  • @Vlix: Do you want to generate a PDF or you only want to display a PDF?
    – Alerty
    Jun 12, 2010 at 18:26
  • The PDF is generated by another software (accounting package, report). I'm the middle man.
    – Vilx-
    Jun 14, 2010 at 8:56
  • Oh, and also there might be not only a PDF, but also a word document, excel file, rtf file, or just plain HTML. :) All in all, it's way simpler just to use an IFrame. I know it's outdated and all, but for this task it's the simple and elegant solution that just works.
    – Vilx-
    Jun 14, 2010 at 8:59
0

Use JavaScript.

How to get screen height: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

0

I suggest html like this:

<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>
<div id="contents">
    <p>        Look it's a content-paragraph.
    </p>
    <p>
        bother<br />
        bother bother bother<br />
        bother bother bother<br />
        bother bother bother<br />
        bother bother bother<br />
        bother bother bother<br />
        bother bother bother
    </p>
</div>

With CSS like this:

#menu {
    border: dashed gray 1px;
}
#menu ul {
    margin: none;
    padding: none;
    text-align: center;
}
#menu li {
    list-style-type: none;
    display: inline;
}


#contents {
    border: solid blue 1px;
}

If you see it on JSFiddle and resize the "Result" quadrant (bottom-right one) so that the text doesn't fit, you'll see that it lets the text stretch down and then gains scroll.
Isn't this what you want?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.