Can this auto-stretcing scenario be realized undex XHTML/CSS?_问答_开发者

Can this auto-stretcing scenario be realized undex XHTML/CSS?

开发者 https://www.devze.com 2023-01-03 07:37 出处：网络

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 mai

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 larg开发者_开发知识库er 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.

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...

Please suggest a PDF viewer for WPF

Otherwise...

http://www.codeproject.com/KB/webforms/aspnetpdfviewer.aspx
http://www.beansoftware.com/ASP.NET-Tutorials/PDF-View-Custom-Control.aspx

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>

Use JavaScript.

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

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?