1

我想要我的网页中有两个水平区域。第一个是菜单。它在顶部。不幸的是，我不知道它的大小，它可能会随着用户操作而改变。菜单下方是主要区域，应至少延伸到窗口底部（如果内容很少）或超出（如果内容很多）。

用 ASCII 艺术来说明：

+----------------------------------------------------+
| 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 查看器”。

你能用WPF做网页吗...

否则...

jQuery 用户界面

这是您可能感兴趣的功能的链接：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上看到它并调整“结果”象限（右下角）的大小以使文本不适合，您会看到它让文本向下拉伸，然后获得滚动。
这不是你想要的吗？

于 2010-06-11T14:39:49.273 回答