带有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“框架”布局

回答

相关问题