Question

在CSS的现代时代，我如何创建一对面板（例如，Outlook中的预览窗口，或主/详细视图）？理想情况下顶部（主）窗格将获得滚动条等？

预期的用例是，用户可以在顶部窗口中滚动，同时始终能够看到预览/详细信息窗口（我打算通过jQuery将所选行的数据加载到底部面板中）。

在旧世界（表格布局）中，我可能有类似的东西：

<html>
<body>
  <table height="100%" border="1" width="100%">
    <tr height="*"><td>master</td></tr>
    <tr height="100"><td>detail</td></tr>
</body>
</html>

那么这如何转化为CSS？（特别是，在两个窗口上获取滚动条）。

Answer 1

好吧，如果您实际使用的是Windows，那么听起来就像是在谈论帧甚至是iFrame。

我的假设是，当你说“窗口”时，你只是指可滚动区域的想法。为此，可以将css属性“overflow”设置为“scroll”，如果包含的元素大小大于其自身的大小，它将滚动。

一个简单的代码示例：

#window-one, #window-two {
    width: 100%;
    height: 50%;
    overflow: scroll;
}

<html>
  <body>
    <div id="window-one">
      <p>Content for window one goes here.</p>
    </div>
    <div id="window-two">
      <p>Content for window two goes here.</p>
    </div>
  </body>
</html>

这将创建两个“窗格”（窗口），占据高度的50％，但跨越窗口的整个宽度。即使不需要，也会在窗格上自动设置滚动条（在这种情况下，它们会被禁用。）

Answer 2

有很多好方法可以做到这一点 - 你可以使用overflow:scroll的任何块级元素（如div）。这样你就可以做你想做的事情而不需要像帧一样复杂的东西（除非你需要的东西）。

尝试这样的事情：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>untitled</title>
        <style type="text/css">
            .pane {
                margin:20px;
                width:300px;
                height:100px;
                overflow:scroll;
            }
        </style>
    </head>
    <body>
        <div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ipsum id diam ullamcorper viverra. Ut nec risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar. Integer vel est. Sed elementum, tortor nec sollicitudin semper, eros purus suscipit pede, in dictum metus ligula id mauris. Donec augue metus, malesuada a, ultricies eu, volutpat quis, est. Fusce suscipit. Mauris magna. Nulla facilisi. Praesent sem odio, imperdiet ac, vestibulum quis, lacinia eget, nibh. Nunc faucibus pede nec pede. Duis eget risus. In hac habitasse platea dictumst. Cras nunc odio, tempus et, condimentum ut, lacinia quis, est. Fusce ipsum metus, accumsan a, faucibus et, semper vitae, pede. Cras est. Vivamus metus dui, lobortis at, fermentum cursus, dapibus eget, orci. Cras imperdiet. </div>
        <div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ipsum id diam ullamcorper viverra. Ut nec risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar. Integer vel est. Sed elementum, tortor nec sollicitudin semper, eros purus suscipit pede, in dictum metus ligula id mauris. Donec augue metus, malesuada a, ultricies eu, volutpat quis, est. Fusce suscipit. Mauris magna. Nulla facilisi. Praesent sem odio, imperdiet ac, vestibulum quis, lacinia eget, nibh. Nunc faucibus pede nec pede. Duis eget risus. In hac habitasse platea dictumst. Cras nunc odio, tempus et, condimentum ut, lacinia quis, est. Fusce ipsum metus, accumsan a, faucibus et, semper vitae, pede. Cras est. Vivamus metus dui, lobortis at, fermentum cursus, dapibus eget, orci. Cras imperdiet. </div>
    </body>
</html>

Answer 3

<html>
    <body>
        <div style="height: 70%; border: 1px solid #000; overflow: auto;">
            <div style="background: #ddd; height: 1000px;">master</div>
        </div>
        <div style="height: 30%; border: 1px solid; #000; overflow: auto;">
            <div style="background: #ddd; height: 1000px;">detail</div>
        </div>
    </body>
</html>

如何使用HTML和CSS编写预览窗格（主/明细）

3 个答案: