固定页眉+菜单，可滚动主体

Question

固定页眉+菜单，可滚动主体

11

我想要实现的是：

+--------屏幕-----------------------+
|       ______________________      |*|
|       |_静态头部_________|      |*|
|       |             |      |      |*|
|       | 内容        |菜单  |      |*|
|       | 可滚动的   |静态的|      |*|
|       |             |      |      |*|
|       |             |      |      |*|
|       |             |      |      |*|
+-------------------------------------+

内容高度可变，内容滚动条必须显示在页面主体中（而不是自己的区域）。我已经掌握了基本思路，但当滚动条显示时，我无法将内容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>

在上面的代码中，内容与滚动条宽度不对齐，如何使其与页面的其余部分正确对齐（即计算其位置时不考虑滚动条宽度，即使有滚动条也是如此）？

- Danicco

8

+1的ASCII图形总是能在SO上看到新用户的好格式化问题。 - Igor Milla

这个是固定宽度的还是标题应该跨越整个视口？ - roryf

整个“主体”（标题、内容+下方菜单）应该是固定宽度的。以前我没有设置固定宽度时，遇到过非常大的宽屏显示器的问题... - Danicco

1

理解你的HTML代码非常困难，我可以建议你在将来添加适当的类名/ID和使用样式表。 - roryf

5个回答

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/

- roryf

1

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

你要寻找的是圣杯设计的子集。这里使用flex显示实现了一个示例：

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

- AlikElzin-kilaka

0

有一些方法可以使用固定高度，然后在可滚动区域上使用溢出属性来实现。然而，这不是一个好的做法，你应该考虑使用 jQuery 或你选择的 JS 库中的粘性头部或滚动头部（随着用户向上和向下滚动而跟随视图区域移动的头部）。

- captbrogers

0

使用 position:fixed 属性不能解决你的问题吗？如果你将这个属性设置到头部和菜单的 div 上呢？

- Jan Daniel

是的，它可以，尽管我模糊地记得这不是一个“标准”选项。或者可能是关于background-position，现在我不确定了。我会试一试，谢谢！ - Danicco

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam · Accepted Answer

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