帶有100％高度和滾動條的IE6「框架」佈局

我想通過固定標題，固定的左導航區域和主內容區域實現簡單的「框架」佈局，該區域使用滾動條填充視口其餘部分的100％如有必要。我的最佳嘗試是在下面 - 但是當我向主div添加足夠的內容以強制滾動時，我看到滾動條延伸到視口底部以下。帶有100％高度和滾動條的IE6「框架」佈局

我在做什麼錯？或者什麼是IE6做錯了，我該如何解決它？

NB請不要推薦使用更新的瀏覽器 - 我喜歡但不能。

更新1（對馬蒂和其他較真！） - 我要開發這需要由用戶100多家子公司訪問一組總行Web應用程序的真實世界的約束範圍內生活，並非所有這些都已升級到現代瀏覽器。而一些子公司則喜歡使用瀏覽器不兼容性作爲不使用總部強加的應用程序的藉口！

更新2

我是一名應用開發者，而不是一個網頁設計師，因爲可能是顯而易見的。迄今爲止，我一直在使用DOCTYPE HTML 4.0 Transitional，我相信所有IE版本都會強制使用怪異模式。不過，我最近嘗試添加AjaxControlToolkit ModalPopupExtender，當彈出窗口顯示時，這會弄亂我的佈局。谷歌建議我需要使用XHTML 1.0來解決這個問題（AjaxControlToolkit不支持怪異模式），事實上我很樂意轉向更乾淨的基於CSS的佈局，但我確實需要我的基本框架佈局才能在IE6中工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 
    <style type="text/css"> 
    html, body 
    { 
     height:100%; 
     margin:0; 
     padding:0; 
     overflow:hidden; 
    } 
    div 
    { 
     border:0; 
     margin:0; 
     padding:0; 
    } 
    div#top 
    { 
     background-color:#dddddd; 
     height:100px; 
    } 
    div#left 
    { 
     background-color:#dddddd; 
     float:left; 
     width:120px; 
     height:100%; 
     overflow:hidden; 
    } 
    div#main 
    { 
     height:100%; 
     overflow:auto; 
    } 
    </style>  
</head> 
<body> 
    <div id="top">Title</div> 
    <div id="left">LeftNav</div> 
    <div id="main"> 
    Content 
    <p> 
    Lorem ipsum ... 
    </p> 
    ... repeated several times to force vertical scroll... 
     <table><tr> 
     <td>ColumnContent</td> 
     ... td repeated several times to force horizontal scroll... 
     <td>ColumnContent</td> 
     </tr></table> 
    </div> 
</body> 
</html>

來源

2010-05-18 Joe

使用較新的瀏覽器。 – 2010-05-18 13:02:10

@Matti - 放下你的肥皂盒！我不是說我不能。 – Joe 2010-05-18 13:14:37

從來沒有！這個肥皂盒是我的生命線！ – 2010-05-18 13:25:57

在我以前的答案，我是絕對錯誤的（沒有雙關語意），因爲你不能同時指定top和bottom在IE6中，雙方都不left和right。此外，您不知道內容div的確切寬度和高度，也不知道它們是視口的百分比。

當我解決了這個問題，我把IE放入怪癖模式，得到border-box box model（另見W3C spec）。要爲符合標準的更多瀏覽器使用相同的CSS規則，您可以使用box-sizing屬性（和變體）。這樣做後，輪廓會裏面的內容，你可以通過指定邊框（寬度和風格）向下推，你的內容，並以正確的：

<!-- put IE in quirks mode --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>IE6 'frames'</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -khtml-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
    } 

    html, body { 
     height: 100%; 
     overflow: hidden; 
    } 

    #top { 
     position: absolute; 
     top: 0; 
     width: 100%; 
     background-color: #ddd; 
     height: 100px; 
     z-index: 2; 
    } 

    #left { 
     position: absolute; 
     left: 0; 
     border-top: 100px solid; /* move everything below #top */ 
     background-color: #bbb; 
     width: 120px; 
     height: 100%; 
     overflow: hidden; 
     z-index: 1; 
    } 

    #main { 
     position: absolute; 
     border-top: 100px solid; 
     border-left: 120px solid; 
     width: 100%; 
     height: 100%; 
     overflow: auto; 
    } 
    </style>  
</head> 
<body> 
    <div id="top">Title</div> 
    <div id="left">LeftNav</div> 
    <div id="main"> 
    <p> 
     Lorem ipsum ...<br /> 
     <!-- just copy above line many times --> 
    </p> 
    </div> 
</body> 
</html>

UPDATE：在IE> = 7更符合標準的瀏覽器，您可以使用position: fixed以及top和bottom（等）規則。有一種方法可以使用CSS expressions在標準模式下（或更確切地說，Almost Standards Mode）在IE6中獲得此類似框架的外觀。這樣，您可以讓JScript引擎計算寬度和高度的正確值（在條件註釋之間添加）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>'Frames' using &lt;div&gt;s</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    html, body { 
     height: 100%; 
     overflow: hidden; 
    } 

    #top, #left, #main { 
     position: fixed; 
     overflow: hidden; 
    } 

    #top { 
     top: 0; 
     width: 100%; 
     background-color: #ddd; 
     height: 100px; 
    } 

    #left { 
     left: 0; 
     top: 100px; /* move everything below #top */ 
     bottom: 0; 
     background-color: #bbb; 
     width: 120px; 
    } 

    #main { 
     top: 100px; 
     left: 120px; 
     bottom: 0; 
     right: 0; 
     overflow: auto; 
    } 
    </style> 
    <!--[if IE 6]> 
    <style> 
    #top, #left, #main { 
     position: absolute; 
    } 

    #left { 
     height: expression((m=document.documentElement.clientHeight-100)+'px'); 
    } 

    #main { 
     height: expression((m=document.documentElement.clientHeight-100)+'px'); 
     width: expression((m=document.documentElement.clientWidth-120)+'px'); 
    } 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <div id="top">Title<br /></div> 
    <div id="left">LeftNav<br /></div> 
    <div id="main"> 
    <p> 
     Lorem ipsum ...<br /> 
     <!-- just copy above line many times --> 
    </p> 
    </div> 
</body> 
</html>

這就是說，我不推薦這種方法。這會顯着減慢已經不太快的IE6的瀏覽體驗，如these expressions are evaluated many times。我想你會在最後使用外部樣式表（和腳本），但是如果你想在XHTML文檔中嵌入這些樣式表，請使用適合腳本或樣式的CDATA標記和註釋使用的語言「，如David Dorward recommends。

來源

2010-05-18 14:49:31

+1以怪癖模式工作。不過，我想避免使用怪異模式 - 請參閱我的問題的更新。這可能嗎？ – Joe 2010-05-19 07:12:06

這是迄今爲止唯一的答案，給出了我想要的渲染 - 但只適用於怪癖模式。即使使用IE8，我也很難在標準模式下獲得相同的效果 - 即使它在IE6中無法正確呈現，您是否有在IE8的標準模式下工作的版本？ – Joe 2010-05-19 09:52:20

非常感謝您的幫助。假設在標準模式下IE6是不可能的，我想在IE6標準模式下得到最好的近似值。例如，如果有必要，我想我不得不接受，如果內容太寬或太高，整個機構會滾動IE6。如果你能告訴我如何做到這一點，我會很感激，但我也會用自己的第二個版本作爲出發點。 – Joe 2010-05-19 12:10:18

這個html應該給你一點幫助，但是你可能不得不用它來完成它在ie6中的工作（對不起，我現在無法在ie6中測試）。問題正在發生，因爲實際上有一個滾動條出現在你有溢出的html和body上：hidden specified。你可以把它關閉，並設置溢出爲自動實際看到它發生。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <style type="text/css"> 
     html 
     { 
      height:100%; 
     } 
     body 
     { 
      height:100%; 
      margin:0px; 
      padding:0px; 
      border-left:0px; 
      border-right:0px; 
      overflow:hidden; 
     } 
     #header 
     { 
      top:0px; 
      width:100%; 
      height:100px; 
      background-color:#dddddd; 
      position:absolute; 
     } 
     #content 
     { 
      top:100px; 
      bottom:0px; 
      width:100%; 
      overflow:auto; 
      position:absolute; 
     } 

     #wrapper 
     { 
     padding-left:125px; 
     } 

     div#left 
    { 
     background-color:#dddddd; 
     float:left; 
     width:120px; 
     height:100%; 
     overflow:hidden; 
    } 
    </style> 
</head> 
<body> 
    <div id="header"></div> 
    <div id="left"></div> 
    <div id="content"> 
    <div id="wrapper"> 
    <p>content</p> 
    <p>content</p> 
    </div> 
</div> 
</body> 
</html>

來源

2010-05-18 16:27:25 Ben

「實際上有一個滾動條出現在html和body」 - 我可以看到，當我使用overflow：auto時。有沒有辦法消除它？ – Joe 2010-05-19 07:10:12

這在IE8中不起作用 - 內容區域超出了視口的右側。 – Joe 2010-05-19 11:55:22

......除了上面的評論：我在兩臺不同的機器上得到了與IE8不同的結果 - 我懷疑這是由於IE8的配置方式。在我的家用機器上，只要內容不太寬，垂直滾動就可以正常工作。但是，我仍然遇到寬屏幕水平滾動問題（例如寬桌面）。在工作中，它根本不起作用 - 我將在明天更加關注瀏覽器配置。 – Joe 2010-05-19 19:54:58

http://www.cssplay.co.uk/layouts/frame.html

來源

2010-05-18 17:25:45 reisio

看起來非常喜歡我想要的 - 明天我會玩一玩，看看我是否可以計算出需要提取的顯着位數。 – Joe 2010-05-18 20:35:11

對於virtuoso CSS的好位，+1，但最終它不會做我所需要的。內容區域有固定寬度的列：在我的情況下，我有一個應用程序可能有很寬的內容（例如一個有許多列的表），在這種情況下我需要水平滾動。 – Joe 2010-05-19 06:53:50

帶有100％高度和滾動條的IE6「框架」佈局

回答

相關問題