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

问题描述：

因为我得到了TLDR（太久没读过）的评论，所以我把这个消除了90％，包括我试过的一切。无法将框架转换为CSS？需要帮助

布局非常非常简单。

----------------------------------------------------------------- 
|                | 
| 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中实现上述功能的代码适用于IE7，IE8和Firefox 3.6，并且不依赖于浏览器代码。这些框架代码在两个.html页面中填入上面的两个“窗口”。简单。对Google很糟糕。

下面是一个不起作用的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，但我不希望它发布。

哇，这是很多...你能把问题分解成更小，更易处理的块吗？值得注意的是，这个问题可能更适用于http://doctype.com。哦，我没有看到提到这一点，但我建议使用重置样式表来最大限度地减少各种浏览器默认值的问题。（http://stackoverflow.com/questions/116754/best-css-reset） – 2010-03-09 18:28:09

警告：堆栈溢出::太大的字符串 – 2010-03-09 18:31:44

警告：TLDR异常文章2411493 – 2010-03-09 18:40:31

答

考虑使用类似于以下东西：

<!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像素高，并且与冲洗页面的顶部，左侧和右侧。身体占据了页面的其余部分，每边都有10px的填充。请注意，DOCTYPE声明（第一行）是必需的。

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

谢谢。这解决了我的问题，它可以在Firefox和IE 8中使用。我曾尝试将大部分设置放在div的格式中，而不是您正在使用的格式，并且不起作用。 – Rilien 2010-03-09 19:39:35

如果解决方案有效，请继续并接受此答案 - 这将确保它出现在答案列表的顶部。任何未来的访问者都会看到这个答案适合你。 – Wesley 2010-03-09 22:28:35

答

这里有很多代码可以看，并且如评论中所示，我在尝试阅读时遇到“TLDR错误”。
这就是说，根据我的经验，当事情表现“错误”时，这是因为html太复杂，有一些不平衡的元素，或者有些元素缺少结束。
首先看看，如果一切正常，你可以尝试使用一个框架，ExtJS和YUI都有布局管理器，可以实现你正在寻找的东西，尽管它们可以是一个相当重量级的解决方案。

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

由于TLDR评论，我已经剥离下来。 – Rilien 2010-03-09 19:07:37

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

相关推荐