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

发布于 2024-08-24 16:01:21 字数 2437 浏览 5 评论 0原文

自从我收到了 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，几乎每一行文本都使用 div，并带有一些 position:absolute 声明。（我没有这么写...）第二个 HTML 文件也使用了一个表格。如果您想查看包含的代码，我将为您提供该代码的 URL，但我不希望将其发布。

原文

Since I got TLDR (too long didn't read) comments, I stripped 90% of this away, including everything I have tried.

The layout is very, very simple.

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

The code that implements the above with frames works in IE7, IE8 and Firefox 3.6, with no browser dependent code. The frames code pulls in two .html pages to fill the two "windows" above. Simple. Terrible for Google.

Here is an example of CSS code that doesn't work. I would have 100+ such examples if I had saved all of them. I'm running the Apache server locally to pull in the SSI's.

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

What this code does in Firefox: The bottom scrolling window is at the top of the page (no margin). (Very wrong.) When the bottom of the browser window is moved up (making the browser window smaller) a scroll bar appears on the right side of the page. (Wrong.)
What this code does in IE 8: The bottom scrolling window sits properly below the top menu window, but there is a scroll bar for the whole screen on the right side, and you have to use both scroll bars to get to the bottom of the text. (This is the only example I tried in IE 8, as I've spent all my time trying to get it to work in Firefox.)

I have tried too many online ideas to mention, and I've stripped what things I did try because of the TLDR comments.

I should mention that the two included HTML files use divs everywhere, for practically every line of text, with some position:absolute declarations. (I didn't write that...) The second HTML file also uses a table. If you want to see the included code I will provide you with the URL to it, but I don't want it posted.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你没皮卡萌 2024-08-31 16:01:21

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

<!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 像素的内边距。请注意，DOCTYPE 声明（第一行）是必需的。

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

Consider using something similar to the following:

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

This results in a header section that is 140 px tall and is flush with the top, left, and right sides of the page. The body takes up the rest of the page and has 10 px padding on each side. Note that the DOCTYPE declaration (the first line) is necessary.

Note: While most modern browsers will work fine with this page, this page will NOT display correctly in IE6. IE6 does not support fixed positioning.

回复收藏 0 原文

南风起 2024-08-31 16:01:21

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

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

回复收藏 0 原文

~没有更多了~