Joe*_*Joe 6 css height internet-explorer-6
我希望实现一个简单的"框架"布局,其中包含固定标题,固定左侧导航区域以及主要内容区域,如果需要,可以使用滚动条填充视口剩余部分的100%.我最好的尝试是在下面 - 但是当我向主div添加足够的内容以强制滚动时,我看到滚动条延伸到视口底部的下方.
我究竟做错了什么？或者IE6做错了什么,我该如何解决？
NB请不要建议使用更新的浏览器 - 我很乐意,但不能.
更新1(对于Matti和其他纯粹主义者!) - 我必须生活在为一个集团总部开发Web应用程序的现实限制中,该集团需要由100多个子公司的用户访问,而不是所有子公司都已升级到现代浏览器.有些子公司喜欢以浏览器不兼容为借口不使用总公司强加的申请!
更新2
我是一名应用程序开发人员,而不是网页设计师,这可能是显而易见的.到目前为止,我一直在使用DOCTYPE HTML 4.0 Transitional,我相信在所有IE版本中强制怪癖模式.但是我最近尝试添加AjaxControlToolkit ModalPopupExtender,这会在显示弹出窗口时弄乱我的布局.Google建议我需要使用XHTML 1.0来解决这个问题(AjaxControlToolkit不支持quirks模式),事实上我很乐意转向更干净的基于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>
在我之前的回答中，我完全错了（没有双关语），因为在 IE6 中你不能同时指定top 和，也不能同时 指定 和。此外，您不知道内容 div 的确切宽度和高度，也不知道它们占视口的百分比。bottomleft right
当我解决这个问题时，我将 IE 置于怪异模式，以获取边框框模型（另请参阅W3C 规范）。要对更多符合标准的浏览器使用相同的 CSS 规则，您可以使用box-sizing属性（和变体）。执行此操作后，边框将进入内容内部，您可以通过指定边框（宽度和样式）将内容向下和向右推：
<!-- put IE in quirks mode -->\n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" \n "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml">\n<head>\n <title>IE6 \'frames\'</title>\n <style type="text/css">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -khtml-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n }\n\n html, body {\n height: 100%;\n overflow: hidden;\n }\n\n #top {\n position: absolute;\n top: 0;\n width: 100%;\n background-color: #ddd;\n height: 100px;\n z-index: 2;\n }\n\n #left {\n position: absolute;\n left: 0;\n border-top: 100px solid; /* move everything below #top */\n background-color: #bbb;\n width: 120px;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n }\n\n #main {\n position: absolute;\n border-top: 100px solid;\n border-left: 120px solid;\n width: 100%;\n height: 100%;\n overflow: auto;\n }\n </style> \n</head>\n<body>\n <div id="top">Title</div>\n <div id="left">LeftNav</div>\n <div id="main">\n <p>\n Lorem ipsum ...<br />\n <!-- just copy above line many times -->\n </p>\n </div>\n</body>\n</html>\n更新：在 IE >= 7 和更多符合标准的浏览器中，您可以position: fixed与top和bottom（等）规则一起使用。有一种方法可以使用CSS 表达式在标准模式（或者更确切地说，几乎标准模式）下的 IE6 中获得类似框架的外观。这样，您可以让 JScript 引擎计算正确的宽度和高度值（添加在条件注释之间）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\n "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml">\n<head>\n <title>\'Frames\' using <div>s</title>\n <style type="text/css">\n * {\n margin: 0;\n padding: 0;\n }\n\n html, body {\n height: 100%;\n overflow: hidden;\n }\n\n #top, #left, #main {\n position: fixed;\n overflow: hidden;\n }\n\n #top {\n top: 0;\n width: 100%;\n background-color: #ddd;\n height: 100px;\n }\n\n #left {\n left: 0;\n top: 100px; /* move everything below #top */\n bottom: 0;\n background-color: #bbb;\n width: 120px;\n }\n\n #main {\n top: 100px;\n left: 120px;\n bottom: 0;\n right: 0;\n overflow: auto;\n }\n </style>\n <!--[if IE 6]>\n <style>\n #top, #left, #main {\n position: absolute;\n }\n\n #left {\n height: expression((m=document.documentElement.clientHeight-100)+\'px\');\n }\n\n #main {\n height: expression((m=document.documentElement.clientHeight-100)+\'px\');\n width: expression((m=document.documentElement.clientWidth-120)+\'px\');\n }\n </style>\n <![endif]-->\n</head>\n<body>\n <div id="top">Title<br /></div>\n <div id="left">LeftNav<br /></div>\n <div id="main">\n <p>\n Lorem ipsum ...<br />\n <!-- just copy above line many times -->\n </p>\n </div>\n</body>\n</html>\n也就是说，我不推荐这种方法。它会明显减慢本来就不太快的 IE6 的浏览体验，因为这些表达式会被计算多次。
\n\n还有一个旁注：我想您最终将使用外部样式表（和脚本），但如果您想将它们嵌入到 XHTML 文档中，请使用适合脚本的 \xe2\x80\x9cCDATA 标记和注释或正如 David Dorward推荐的那样，使用\xe2\x80\x9d 风格语言。
\n