Question

我希望有一个固定高度的页面（没有滚动条）。然后在标题下面有一个流体高度div，它有一个滚动条（不是整个页面）。此外，宽度在整个页面上都是流动的。

如下图所示： Image of layout involving fixed-height header followed by scrolling area http://img709.imageshack.us/img709/9242/tmphh.png

我应该在HTML中做什么，以便它适用于所有浏览器，包括IE6？

编辑：代码已更改，适用于IE6，Firefix，Chrome，但IE6显示4个滚动条!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
    HTML,BODY
    {
        height:100%;
    }
    .fullContainer
    {
        width:80%;
        height:40%;
        overflow:auto;
        position:relative;
    }

    /*-- Can only modify these --*/
    .header
    {
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 

        height:40px;
        background-color:#eeeeee;
    }
    .content
    {
        position: absolute; 
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;

        overflow:auto;
    }
    .contentContainer
    {
        height:100%;
    }
    * html .fullContainer{ /*IE6 hack*/
        padding: 40px 0 0 0;
    }
    * html .content{ /*IE6 hack*/
        height: 100%; 
        width: 100%; 
    }
    /*-- Can only modify these --*/
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div>before content...</div>
<div class="fullContainer">
    <div class="header">Header</div>
    <!-- <div class="contentContainer"> -->
        <div class="content">
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            <div style="width:1000px;background-color:#ccffcc;">long text</div>
        </div>
    <!-- </div> -->
</div>
<div>after content...</div>

</body>
</html>

Answer 1

由于你想在底部div上进行内部滚动，我假设你希望底部div垂直流动（相当 - 流畅到浏览器窗口大小，而不是内容）以及水平。（水平流动实际上与垂直偏移的任何解决方案没有太大关系。）既然如此，你的标题必须是一个设定的高度。如果底部div不需要垂直流动，您只需将height设置为所需的数字并声明overflow-y:scroll。

对于垂直流动性，您需要使用conflicting absolute positions，将底部div设置为从顶部div结束的位置下方开始，然后向下到页面底部。基本上：

#bottomDiv {
  position: absolute;    
  top: 100px; /* however tall your top div is */
  left: 0;
  right: 0;
  bottom: 0;
}

请注意您必须用于IE6的表达式（在上面链接的文章中列出）。

更新为什么不能修改.fullContainer？如果它只是在另一个样式表中，那么无论如何都要尝试。 CSS的工作方式，你可以覆盖它之前的任何东西。因此，如果在您的可编辑区域中您可以添加一个fullContainer规则（如果您正在编辑CSS文件，则应该可以使用该规则），您很可能可以重新定义该div以消除宽度和高度声明（ width:auto和height:auto应该这样做，并且类似地重置或覆盖其他内容（例如，overflow:hidden，如果有必要）。

另一种选择是尝试让你想要的（新的）顶部和底部div都使用position:fixed，但请注意固定位置在某些浏览器上是出了名的错误，你可能想要避免它变得脆弱布置整个网站。

更新2 对于IE6，您使用100％高度加填充，这意味着它将自动过高。在article I point to中，搜索“为IE5和IE6创建例外”并使用这些表达式 - 如果你不能将它们放在单独的样式表中，只需使用你已经使用的星形黑客。

Answer 2

模拟此方法的一种简单方法是为标头组件提供以下属性：

div.header {position: fixed;}

并给上面的div一个固定的高度，而不是为底部的div。

Answer 3

这样做吗？

HTML

<body>
    <div id="header">

    </div>

    <div id="wrapper">

    </div>
</body>

CSS：

    *{padding:0;margin:0}
    body{overflow:hidden}
    #header,#wrapper{width:100%}
    #header{position:fixed;top:0;left:0;height:100px;background-color:#F00}
    #wrapper{position:fixed;height:100%;margin-top:100px;overflow:scroll}

Answer 4

我认为这应该可以解决问题

<body style="margin:0;width:100%; height:100%; overflow:hidden;">
  <div id="HeaderDiv" style="width:100%; height:100px; overflow:hidden; float:left;">
  </div>
  <div id="FluidDiv" style="width:100%; height:100%; overflow:scroll; float:left;">
  </div>     
</body>

我如何在HTML中实现以下功能？

4 个答案: