5

我不知道如何解决这个问题，以便在两页内移动内容+外部内容。

我有以下布局：

  • 页眉 + 页脚
  • 书
  • 具有固定宽度和高度的页面。

我想在没有任何页面滚动条的情况下从主滚动条滚动页面内容（如 gmail compose 示例）

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

然后我们有两个页面，它们的内容彼此不同，并且每个页面都可以比另一个页面更长。所以我们要滚动浏览所有数据，然后再继续滚动回页脚。

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

仅从 css 解决这个问题会很棒。

布局结构：（解决方案应该只有一个主浏览器滚动条，以控制页面和外部书籍内容。） 布局结构

4

3 回答 3

6

如果我的问题正确，您正在寻找 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>元素，但不滚动页眉和页脚元素。

最后是在线演示的jsFiddle 链接。

于 2013-08-21T10:07:44.183 回答
1

将需要固定的标题部分放在单独的 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;
}

为空间添加另一个 div 到标题的底部

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

这是jsfiddle。

于 2013-08-27T10:52:51.750 回答
0

您可以将以下方法与纯 CSS 和无表格一起使用。

在此处查看在线演示。

结果：

例子

然而，这意味着您需要稍微更改文档结构（我使用的是 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;
}
于 2013-08-28T07:40:00.390 回答