Question

由于我获得了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文件在任何地方使用div，几乎每行文本都有一些position:absolute声明。（我没有写那个......）第二个HTML文件也使用了一个表。如果你想看到包含的代码，我将为你提供它的URL，但我不希望它发布。

Answer 1

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

<!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像素，并与页面的顶部，左侧和右侧齐平。正文占据页面的其余部分，每边有10 px填充。请注意，DOCTYPE声明（第一行）是必要的。

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

Answer 2

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

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

无法将帧转换为CSS？需要帮助

2 个答案: