Question

这就是我想要完成的事情：

+--------screen-----------------------+
|       ______________________      |*|
|       |_static_header______|      |*|
|       |             |      |      |*|
|       | content     |menu  |      |*|
|       | scrollable  |static|      |*|
|       |             |      |      |*|
|       |             |      |      |*|
|       |             |      |      |*|
+-------------------------------------+

内容的高度可变，内容滚动条必须显示在页面正文中（而不是在页面上）。我设法得到了基本的想法，但是当滚动条显示时，我很难将内容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>

在上面的代码中，内容因滚动条宽度而关闭，如何在页面的其余部分正确显示它（即计算它的位置而不考虑滚动条宽度，即使它有一个）？

Answer 1

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

Answer 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/

Answer 3

有一些方法可以使用固定高度来执行此操作，然后在可滚动区域上使用overflow属性。但是，这不是一个好的做法，你应该看看是从jQuery或你选择的JS库使用一个粘性标题或滚动标题（一个跟随用户向上和向下滚动的查看区域）。

Answer 4

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

Answer 5

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

您正在寻找的是Holy Grail design的一部分。

Here是使用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>

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

5 个答案: