Question

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

我做错了什么？或者IE6做错了什么以及如何解决？

请不要推荐使用更新的浏览器 - 我很乐意但不能。

更新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>

Answer 1

在我之前的回答中，我完全错了（没有双关语），因为你不能在IE6中同时指定top 和 bottom，left 1}} 和 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>

更新：在IE＆gt; = 7以及更多符合标准的浏览器中，您可以position: fixed和top同时使用bottom（等）规则。有一种方法可以使用Almost Standards Mode在标准模式（或更确切地说，CSS expressions）中在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。

Answer 2

这个HTML应该会给你一些帮助但你可能不得不摆弄它以使它在ie6中完美地工作（抱歉我现在无法在ie6中测试）。问题正在发生，因为实际上有一个滚动条出现在html和body上，你有溢出：隐藏指定。您可以将其关闭并将溢出设置为auto以实际看到它发生。

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

Answer 3

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

IE6“框架”布局，100％高度和滚动条

3 个答案: