IE6“框架”具有 100% 高度和滚动条的布局

发布于 2024-09-01 14:46:29 字数 1984 浏览 1 评论 0原文

我想实现一个简单的“框架”布局，其中包含固定标题、固定左侧导航区域和主内容区域，必要时可使用滚动条填充 100% 的视口剩余部分。我最好的尝试如下 - 但是当我向主 div 添加足够的内容以强制滚动时，我看到滚动条延伸到视口底部下方。

我做错了什么？或者 IE6 做错了什么以及如何修复它？

请注意，请不要建议使用更新的浏览器 - 我很乐意但不能。

更新 1（针对 Matti 和其他纯粹主义者！） - 我必须生活在为集团总部开发 Web 应用程序的现实限制中，该应用程序需要由 100 多个子公司的用户访问，并非所有浏览器都已升级到现代浏览器。而有些子公司就喜欢以浏览器不兼容为借口，不使用总公司强加的应用程序！

更新 2

我是一名应用程序开发人员，而不是网页设计师，这可能是显而易见的。迄今为止，我一直在使用 DOCTYPE HTML 4.0 Transitional，我相信它会在所有 IE 版本中强制使用怪异模式。然而，我最近尝试添加 AjaxControlToolkit ModalPopupExtender，这在显示弹出窗口时弄乱了我的布局。 Google 建议我需要使用 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>

原文

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.

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.

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!

Update 2

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Saygoodbye 2024-09-08 14:46:29

在我之前的回答中，我完全错了（没有双关语），因为你不能在 IE6 中同时指定 top 和 bottom ，也不能左 和 右。此外，您不知道内容 div 的确切宽度和高度，也不知道它们占视口的百分比。

当我解决这个问题时，我将 IE 置于怪异模式，以获得 border-box 盒子模型（另请参阅 W3C 规范）。要对更多符合标准的浏览器使用相同的 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>

更新：在 IE 中 > ;= 7 及更多兼容标准的浏览器，您可以将 position:fixed 与 top 和 bottom （等）规则一起使用。有一种方法可以在标准模式下的 IE6 中获得类似框架的外观（或者更确切地说，几乎标准模式) 使用 CSS 表达式。这样，您可以让 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 <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 的浏览体验，如这些表达式被评估多次。

还有一个旁注：我想您最终会使用外部样式表（和脚本），但如果您想将它们嵌入到 XHTML 文档中，请使用“适合所使用的脚本或样式语言的 CDATA 标记和注释”，正如 David Dorward 建议。

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.

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: 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>

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.

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.

回复收藏 0 原文

〃安静 2024-09-08 14:46:29

这个 html 应该会给你一些帮助，但你可能不得不摆弄它才能让它在 ie6 中完美工作（抱歉我现在无法在 ie6 中测试）。问题的发生是因为实际上在 html 和 body 上出现了一个滚动条，其中您指定了 Overflow:hidden 。您可以将其关闭并将溢出设置为自动以实际看到它的发生。

<!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>

This html should give you a bit of help but your probably going to have to fiddle with it to get it to work perfectly in ie6 (sorry I can't test in ie6 right now). The problem is happening because there is actually a scroll bar appearing on the html and body where you have overflow:hidden specified. You can take that off and set overflow to auto to actually see it occurring.

<!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>

回复收藏 0 原文