使用浏览器的主滚动条滚动2个DIV内容+主要内容

Question

我无法弄清楚如何解决这个问题,在两页内外移动内容+外部内容.

我有以下布局:

• 标题+页脚
• 书
• 宽度和高度固定的页面.

我想从主滚动条滚动页面内容而没有任何页面滚动条(如gmail撰写示例)

主要问题是.书籍将在标题后显示,如果用户使用较小的屏幕分辨率,它将显示滚动条向下滚动以正确查看书籍.

然后我们有两个页面,其内容彼此不同,每个页面可以比另一个页面长.所以我们想要滚动浏览所有数据,然后再继续向后滚动页脚.

jsFiddle Example: http://jsfiddle.net/7vqzF/2/

仅从css解决这个问题真是太棒了.

布局结构 :(解决方案应该只有一个主浏览器滚动条,用于控制页面和外部书籍内容.)

Answer 1

如果我的问题正确,那么您正在寻找CSS属性fixed.这里有一些HTML,包括可能完全符合您要求的CSS:

<html>
  <head>
    <style>
      body {
        margin-top: 150px;
      }

      .header {
        width: 100%;
        position: fixed;
        top: 0;
        background-color: white;
        border-bottom: 2px solid lightblue
      }

      .footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        background-color: white;
        border-top: 2px solid lightblue
      }

      .book table td {
        vertical-align: top;
      }

      .page1, .page2 {
        border: solid 1px red;
        width: 400px;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <h1>Header</h1>
      <ul>
        <li>home</li>
        <li>contact us</li>
      </ul>
    </div>

    <div class="book">

      <table>
        <tr>
          <td>
            <div class="page1">
              <h2>Page1</h2>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              ...
            </div>
          </td>
          <td>
            <div class="page2">
              <h2>Page2</h2>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              ...
            </div>
          </td>
        </tr>
      </table>
    </div>

    <div class="footer">
      My Footer
    </div>     

  </body>
</html>

以下是我的浏览器显示以上HTML的屏幕截图:

Browser-Scrollbar仅滚动page1/page2 <div>elemtents,但不滚动页眉和页脚元素.

最后这里是在线演示的jsFiddle链接.