1

Webページに2つの水平領域が必要です。1つ目はメニューです。それは上にあります。残念ながら、そのサイズはわかりません。ユーザーの操作に応じて変更される可能性があります。メニューの下には、少なくともウィンドウの下部（コンテンツが少ない場合）またはそれ以上（コンテンツが多い場合）まで拡大する必要があるメイン領域があります。

アスキーアートで説明するには：

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

これはできますか？Javascriptで実行できますか？

追加：物事を見通して混乱を避けるために、次のように考えてください。上部のメニューは自分で生成しますが、下部の領域はページの残りの部分を埋めたいIFrameです。私の場合、これが最終的にはどうなるかということです。

4

3 に答える 3

1

iframe は時代遅れなので使用しません。代わりに、jQuery UI や CSS を使用できます。

ASP.NET

「PDFビューア」をご利用いただけます。

WebにWPFを使用できますか...

さもないと...

jQuery UI

興味のある機能へのリンクは次のとおりです: http://jqueryui.com/demos/tabs/#default

CSS楽しい！

以下は、CSS でできることの例です。

スタイル.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>
于 2010-06-11T14:31:04.917 に答える
0

JavaScriptを使用します。

画面の高さを取得する方法：http ：//www.howtocreate.co.uk/tutorials/javascript/browserwindow

于 2010-06-11T12:46:17.440 に答える
0

次のような html をお勧めします。

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

次のような CSS を使用します。

#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;
}

JSFiddleで表示され、テキストが収まらないように「結果」象限 (右下の 1 つ) のサイズを変更すると、テキストが下に伸びてスクロールすることがわかります。
これはあなたが望むものではありませんか？

于 2010-06-11T14:39:49.273 に答える