Fatal编程技术网
  • css/
  • Css IE6“；“框架”；具有100%高度和滚动条的布局

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

css

Css IE6“；“框架”；具有100%高度和滚动条的布局,css,height,internet-explorer-6,Css,Height,Internet Explorer 6,我想实现一个简单的“框架”布局，带有固定的标题、固定的左侧导航区域和一个主内容区域，如果需要，可以用滚动条填充视口其余部分的100%。我最好的尝试是在下面——但当我向主div添加足够的内容以强制滚动时，我看到滚动条延伸到视口底部的下方 我做错了什么？或者IE6做错了什么？我如何修复它 注意：请不要建议使用更新的浏览器-我很想，但不能 更新1（针对Matti和其他纯粹主义者！）-我必须生活在为集团总部开发web应用程序的现实世界中，该应用程序需要100多个子公司的用户访问，但并非所有子公司都已升级

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

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

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

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

更新2

我是一名应用程序开发人员，而不是网页设计师，这可能是显而易见的。到目前为止，我一直在使用DOCTYPE HTML4.0过渡版，我相信这会在所有IE版本中强制使用怪癖模式。但是，我最近尝试添加AjaxControlToolkit ModalPopupXtender，这会在显示弹出窗口时弄乱我的布局。谷歌建议我需要使用XHTML1.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>


html，正文
{
身高：100%；
保证金：0；
填充：0；
溢出：隐藏；
}
div
{
边界：0；
保证金：0；
填充：0；
}
顶面
{
背景色：#dddddd；
高度：100px；
}
左分区
{
背景色：#dddddd；
浮动：左；
宽度：120px；
身高：100%；
溢出：隐藏；
}
主分区
{
身高：100%；
溢出：自动；
}
标题
左导航
内容

乱数假文。。。


... 重复多次以强制垂直滚动。。。
专栏内容
... td重复多次以强制水平滚动。。。
专栏内容
在我之前的回答中，我完全错了（没有双关语），因为你不能在IE6中同时指定
顶部
和
底部
，也不能同时指定
左侧
和
右侧
。此外，您不知道内容div的确切宽度和高度，也不知道它们占视口的百分比

当我解决这个问题时，我将IE设置为“怪癖”模式，以获得（另请参阅）。要对更符合标准的浏览器使用相同的CSS规则，您可以使用
框大小调整
属性（和变体）。完成此操作后，边框进入内容内部，您可以通过指定边框（宽度和样式）将内容向下和向右推：

也就是说，我不推荐这种方法。它将显著降低已经不太快的IE6的浏览体验，如图所示

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

这个html应该会给你一些帮助，但是你可能需要修改它才能使它在ie6中完美工作（很抱歉，我现在不能在ie6中测试）。之所以出现这个问题，是因为在html和正文中出现了一个滚动条，其中指定了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>


html
{
身高：100%；
}
身体
{
身高：100%；
边际：0px；
填充：0px；
左边框：0px；
右边框：0px；
溢出：隐藏；
}
#标题
{
顶部：0px；
宽度：100%；
高度：100px；
背景色：#dddddd；
位置：绝对位置；
}
#内容
{
顶部：100px；
底部：0px；
宽度：100%；
溢出：自动；
位置：绝对位置；
}
#包装纸
{
左侧填充：125px；
}
左分区
{
背景色：#dddddd；
浮动：左；
宽度：120px；
身高：100%；
溢出：隐藏；
}
内容

内容

@Matti-离开你的肥皂盒！我不是已经说过我不能了吗？永远不会！这个肥皂盒是我的生命线！你不需要说
div#top
，
div#left
等等，只要
#top
和
#left
就足够了。看起来很像我想要的-我明天会玩它，看看我是否能找出我需要提取的突出部分。+1是一个不错的CSS，但最终它不能满足我的需要。内容区域有固定宽度的列：在我的例子中，我有一个应用程序，它可能有广泛的内容（例如，一个有许多列的表），在这种情况下，我需要水平滚动。“实际上有一个滚动条出现在html和正文上”-当我使用overflow:auto时，我可以看到这一点。有没有办法消除它？这在IE8中不起作用-内容区域超出了视口的右侧。。。。除了上面的评论：我在两台不同的机器上使用IE8得到了不同的结果——我怀疑这是由于IE8的配置方式。在我家的机器上，只要内容不太宽，垂直滚动就可以正常工作。但我仍然有问题与横向滚动广泛的内容（例如，一个广泛的表）。在工作中，它根本不起作用-我将更仔细地观察br 
<!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>

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