Question

我无法弄清楚如何解决这个问题，以便在两页内容和外部内容中移动内容。

我有以下布局：

标题+页脚
book
固定宽度和高度的页面。

我想从主滚动条滚动页面内容而不使用任何页面滚动条（如gmail撰写示例）

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

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

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

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

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

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的屏幕截图： enter image description here

浏览器 - 滚动条仅滚动page1 / page2 <div>元素，但不会滚动页眉和页脚元素。

最后这里是在线演示的jsFiddle Link。

Answer 2

将需要固定的标题部分放在单独的div中并应用这些样式。

  <div class="fix">
    <h1> Header</h1>
    <menu><ul><li>home</li><li>contact us</li></ul></menu>
    </div>
.fix{
 position:fixed;
    top:0px;
    left:0px;
    background:#FFF;
    width:100%;
    border-bottom:1px solid black;
}

for space将另一个div添加到标题的底部

<div class="space"></div>
.space{
 width:100%;
 height:150px;   
}

这是jsfiddle。

Answer 3

您可以使用以下方法使用纯CSS而不使用表格。

<强> See online demo here

结果：

Example

然而，这意味着您需要稍微更改文档结构（我使用的是HTML5元素，但如果需要，可以很容易地将其更改为普通的div） - 正如您可以看到结构非常简单：

<header>Header
    <nav>Menu</nav>
</header>

<main>
    <div class="page">
        <h3>Page 1</h3>
        scroll from main scrollbar
        ....
    </div>
    <div class="page">
        <h3>Page 2</h3>
            scroll from main scrollbar
            ....
    </div>
</main>

<footer>Footer</footer>

现在只需要设置样式，以便您可以使用主滚动条滚动“两个”页面。这方面的基本类是：

.page {
    float:left;
    margin:70px 10px 50px 10px;
    border:1px solid #000;
    width:45%;
}

page类的重要部分是它的顶部和底部边距设置为匹配页眉和页脚。即使页眉和页脚是固定的，这也是使两页可见的原因。

其余的CSS只是例如：

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
header {
    position:fixed;
    top:0;
    width:100%;
    height:70px;
    font:32px sans-serif;
    color:#fff;
    background:#555;
}
nav {
    position:absolute;
    bottom:0;
    font:12px sans-serif;
}
footer {
    position:fixed;
    width:100%;
    bottom:0;
    height:50px;
    background:#555;
}

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

3 个答案: