無法將框架轉換爲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，但我不希望它發佈。

來源

2010-03-09 Rilien

哇，這是很多...你能把問題分解成更小，更易處理的塊嗎？值得注意的是，這個問題可能更適用於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不支持固定定位。

來源

2010-03-09 19:07:18 Wesley

謝謝。這解決了我的問題，它可以在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

來源

2010-03-09 18:45:04

由於TLDR評論，我已經剝離下來。 – Rilien 2010-03-09 19:07:37

無法將框架轉換爲CSS？需要幫助

回答

相關問題