静态标题+菜单，可滚动正文答案

【问题标题】：Static header + menu, scrollable body静态标题+菜单，可滚动正文
【发布时间】：2011-07-08 23:18:59
【问题描述】：

这就是我想要完成的：

+--------屏幕-----------+ | ______________________ |*| | |_static_header______| |*| | | | | |*| | |内容 |菜单 | |*| | |可滚动|静态| |*| | | | | |*| | | | | |*| | | | | |*| +--------------------------------------------------+

内容高度可变，内容滚动条必须显示在页面正文中（而不是显示在页面上）。我设法得到了基本的想法，但是当滚动条显示时，我无法让内容 div 处于正确的位置，即使我设置为始终显示滚动条，我也不能使用固定宽度，因为它们不同从浏览器到浏览器。

<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;">
    <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;">
        Header
    </div>
</div>

<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's -->
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;">
    <div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;">
        <div style="background-color:Orange; width:100%; height:900px;">
            Content
        </div>
    </div>
</div>

<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;">
    <div style="width:500px; float:left;">
        <div style="background-color:Green; float:right; width:200px; ">
            Menu
        </div>            
    </div>
</div>

在上面的代码中，内容被滚动条宽度所关闭，我怎样才能正确处理页面的其余部分（即，在不考虑滚动条宽度的情况下计算它的位置，即使它有一个）？

【问题讨论】：

+1 ascii 图形。并且很高兴在 SO 上看到新用户提出的格式良好的问题。
这是固定宽度还是标题应该跨越整个视口？
整个“正文”（标题、内容+下面的菜单）的宽度是固定的。当我没有设置固定宽度时，我之前在使用非常宽的显示器时遇到问题......
理解您的 HTML 非常困难，我建议您以后添加适当的类名/ID 并使用样式表。

标签： css layout header menu

【解决方案1】：

如果我正确理解您的问题，这将是一个解决方案：http://jsfiddle.net/7pJS8/

【讨论】：

假设静态标题部分的高度不是恒定的，而是根据情况而变化？是否还有一种仅使用 css 的方式来滚动其下方的内容，而不是滚动整个窗口？

【解决方案2】：

<style>
body {
    padding: 0px;
}
.container {
    margin: 0px auto;
    position: relative;
    width: 500px;
}

#header {
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000;
}
#header .container {
    background: blue;
    height: 100px;
}

#content {
    background: green;
    height: 1500px;
    margin-top: 100px;
}
#content .inner {
    margin-right: 200px;
}

#sidebar {
    left: 0px;
    position: fixed;
    top: 100px;
    width: 100%;
    z-index: 1000;
}
#sidebar .inner {
    background: red;
    height: 200px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
}
</style>

<div id="header">
    <div class="container">
        header
    </div>
</div>
<div id="content" class="container">
    <div class="inner">
        content
    </div>
</div>
<div id="sidebar">
    <div class="container">
        <div class="inner">
            sidebar
        </div>
    </div>
</div>

可能的解决方案：http://jsfiddle.net/zWERN/

【讨论】：

【解决方案3】：

在整个页面上设置滚动，可能会导致标题和菜单消失 - 当内容很长时。

您要查找的是Holy Grail design 的子集。

Here 是一个使用弹性显示的实现：

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <!-- No need for 'flex-direction: row' because it's the default value -->
    <div style="display: flex; flex: 1">
      <div>NAV|</div>
      <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
      </div>
      <div>|SIDE</div>
    </div>
    <div>------------<br/>FOOTER</div>
  </body>
</html>

【讨论】：

【解决方案4】：

有一些方法可以使用固定高度，然后在可滚动区域上使用溢出属性。但是，这不是一个好习惯，您应该注意的是使用 jQuery 或您选择的 JS 库中的粘性标题或滚动标题（用户上下滚动时跟随查看区域的标题）。

【讨论】：

【解决方案5】：

position:fixed 不能解决您的问题吗？如果将position:fixed设置为标题和菜单div？

【讨论】：

是的，虽然我隐约记得这不是“标准”选项。或者也许是关于背景位置，现在我不确定。我去试试，谢谢！