IE6“帧” 100％高度的布局和滚动条 [英] IE6 "frame" layout with 100% height and scrollbars
问题描述
我想实现一个简单的框架布局，固定的标题，固定的左导航区域和一个主要内容区域，如果需要，用滚动条填充视口的剩余部分的100％。我最好的尝试是在下面 - 但是当我添加足够的内容到主div强制滚动，我看到滚动条延伸到视口底部以下。
I want to achieve a simple "frame" layout with fixed header, fixed left navigation area, and a main content area that fills 100% of the remainder of the viewport with scrollbars if necessary. My best attempt is below - but when I add enough content to the main div to force scrolling, I see that the scrollbar extends below the bottom of the viewport.
我做错了？或者什么是IE6做错了，我该如何解决？
What am I doing wrong? Or what is IE6 doing wrong and how can I fix it?
请不要推荐使用更新的浏览器 - 我很喜欢，但不能。
NB please don't recommend using a more recent browser - I'd love to but can't.
更新1 （适用于Matti和其他纯粹主义者） - 我必须在开发Web应用程序的真实世界限制办公室，需要由超过100家子公司的用户访问，并不是所有的都已升级到一个新的浏览器。
Update 1 (for Matti and other purists!) - I have to live within real-world constraints of developing a web application for the head office of a group which needs to be accessed by users in over 100 subsidiaries, not all of which have upgraded to a modern browser. And some subsidiaries would love to use browser incompatibility as an excuse not to use the application imposed by head office!
更新2
我是一个应用程序开发人员，而不是一个网页设计师，这可能是显而易见的。到目前为止我一直在使用DOCTYPE HTML 4.0 Transitional，我相信在所有IE版本中强制怪癖模式。但是我最近尝试添加AjaxControlToolkit ModalPopupExtender，当显示弹出窗口时，这弄乱了我的布局。谷歌建议我需要使用XHTML 1.0来解决这个问题（AjaxControlToolkit不支持怪异模式），实际上我很高兴移动到更干净的基于CSS的布局，但我确实需要我的基本框架布局工作在IE6 。
I'm an application developer, not a web designer, as is probably obvious. To date I have been using a DOCTYPE HTML 4.0 Transitional which I believe forces quirks mode in all IE version. However I recently tried adding the AjaxControlToolkit ModalPopupExtender, and this messes up my layout when the popup is displayed. Google suggested I need to use XHTML 1.0 to fix this (AjaxControlToolkit doesn't support quirks mode), and in fact I'm quite happy to move to cleaner CSS-based layout, but I do need my basic frame layout to work in 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 和 bottom left 和 right 。此外，您不知道内容div的确切宽度和高度，您也不知道它们是视口的百分比。
In my previous answer, I was absolutely wrong (no pun intended), as you can't specify both top and bottom in IE6, neither both left and right. Moreover, you don't know the exact width and height of the content div, nor do you know them as a percentage of the viewport.
当我解决这个问题时，我将IE转换为quirks模式，以获取边框框模型（另请参阅< a href =http://www.w3.org/TR/CSS2/box.html =nofollow noreferrer> W3C spec ）。要对更多符合标准的浏览器使用相同的CSS规则，可以使用框大小属性（和变体）。执行此操作后，边框会在内容中显示，您可以通过指定边框（宽度和样式）将内容向下推到右侧：
When I solved this, I put IE into quirks mode, to get the border-box box model (see also W3C spec). To use the same CSS rules for more standards compliant browser, you can use the box-sizing property (and variants). After doing this, the borders get inside the contents and you can push your contents down and to the right by specifying a border (width and style):
<!-- 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 与顶部和底部 et al。）规则。有一种方法可以在IE6中以标准模式获得此框架外观（或者更确切地说，几乎标准模式< a>），使用 CSS表达式。这样，您可以让JScript引擎计算正确的宽度和高度值（在条件注释之间添加）。
UPDATE: In IE >= 7 and more standards compliant browsers you can use position: fixed together with both top and bottom (et al.) rules. There is a way to get this frame-like appearance in IE6 in Standards Mode (or rather, Almost Standards Mode) using CSS expressions. This way, you can let the JScript engine calculate the correct values of width and height (added between conditional comments).
<!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 <div>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的浏览体验，因为这些表达式被评估很多次。
That said, I don't recommend this method. It will slow down the browsing experience of the already not too fast IE6 noticeably, as these expressions are evaluated many times.
只需要一个sidenote：我想你最后将使用外部样式表（和脚本）如果您要将其嵌入到XHTML文档中，请使用适用于所使用的脚本或样式语言的CDATA标记和注释，如David Dorward recommended 。
Just one more sidenote: I suppose you'll use external style sheets (and scripts) in the end, but if you want to embed those inside an XHTML document, use "CDATA markers and comments appropriate for the script or style language used", as David Dorward recommends.
这篇关于IE6“帧” 100％高度的布局和滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
