1

由于我收到了 TLDR（太久没看）评论，我删除了 90% 的评论，包括我尝试过的所有内容。

布局非常非常简单。

-----------------------------------------------------------------
|                                                               |
|   This menu area is fixed and does not scroll up off the page |
|              - NO SCROLL BARS -                               |
|---------------------------------------------------------------|
|                                                               |
|   | ------------------------------------------------------|   |
|   |                                                       |   |
|   |                                                       |   |
|   |      This area, with padding on the left and right,   |   |
|   |      has a scroll bar on its right side (not all      |   |
|   |      the way to the right side of the page), and is   |   |
|   |      attached to the bottom of the browser window -   |   |
|   |      when the bottom of the browser is resized up,    |   |
|   |      this windows shrinks, and scroll bars DO NOT     |   |
|   |      appear on the far right side of the page.        |   |
|   | ------------------------------------------------------|   |
|---------------------------------------------------------------|

使用框架实现上述代码的代码适用于 IE7、IE8 和 Firefox 3.6，没有依赖于浏览器的代码。框架代码拉入两个 .html 页面来填充上面的两个“窗口”。简单的。对谷歌来说太可怕了。

这是一个不起作用的 CSS 代码示例。如果我保存了所有这些示例，我将拥有 100 多个这样的示例。我在本地运行 Apache 服务器以引入 SSI。

<html>
<body>

<div style="float: top; position: fixed; width: 95%; height: 140; border-style: solid">
<!-- SSI code deleted - includes code from another page --> 
</div>

<div style="overflow: auto; top: 100; width: 900; height: 500; background-color:white;
 color:black; text-decoration:none">
<!-- SSI code deleted - includes code from another page -->
</div>

</body>
</html>
  • 此代码在 Firefox 中的作用：底部滚动窗口位于页面顶部（无边距）。（非常错误。）当浏览器窗口的底部向上移动（使浏览器窗口变小）时，页面右侧会出现一个滚动条。（错误的。）
  • 此代码在 IE 8 中的作用：底部滚动窗口位于顶部菜单窗口的正下方，但右侧有一个用于整个屏幕的滚动条，您必须使用两个滚动条才能到达底部文本。（这是我在 IE 8 中尝试的唯一示例，因为我一直在尝试让它在 Firefox 中工作。）

我已经尝试了太多在线想法来提及，并且由于 TLDR 评论，我已经剥夺了我尝试过的东西。

我应该提一下，这两个包含的 HTML 文件在任何地方都使用divs，几乎用于每一行文本，并带有一些position:absolute声明。（不是我写的……）第二个 HTML 文件也使用了一个表格。如果您想查看包含的代码，我会为您提供它的 URL，但我不希望它发布。

4

2 回答 2

3

考虑使用类似于以下内容的内容：

<!DOCTYPE html>
<html>
<head>
<title>Your page title</title>
<style>
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 140px;
        overflow: hidden;
    }

    .content {
        position: absolute;
        top: 150px; /* 140px (header) + 10px top padding */
        left: 10px; /* 10px padding */
        right: 10px; /* 10px padding */
        bottom: 10px; /* 10px padding */
        overflow: auto;

    }
</style>
</head>

<body>

<div class="header">
    <!--#include virtual="/nav2.html" -->
</div>

<div class="content">
    <!--#include virtual="/main2.html" -->
</div>

</body>
</html>

这会产生一个 140 像素高的标题部分，并与页面的顶部、左侧和右侧齐平。body 占据了页面的其余部分，每边都有 10 px 的填充。请注意 DOCTYPE 声明（第一行）是必需的。

注意：虽然大多数现代浏览器都可以正常使用此页面，但此页面在 IE6 中将无法正确显示。IE6 不支持固定定位。

于 2010-03-09T19:07:18.317 回答
0

那里有很多代码可供查看，正如评论中所指出的，我在尝试阅读它时遇到了“TLDR 错误”。
话虽如此，根据我的经验，当事情表现“错误”时，这是因为 html 太复杂，有一些不平衡的元素，或者有些元素缺少关闭。
首先看一下，如果一切正常，您可以尝试使用框架，ExtJS 和 YUI 都有布局管理器，可以实现您正在寻找的内容，即使它们可能是一个非常重量级的解决方案。

YUI 布局管理器：http: //developer.yahoo.com/yui/layout/
ExtJS 布局管理器：http ://www.extjs.com/deploy/dev/examples/layout/complex.html

于 2010-03-09T18:45:04.487 回答