代码之家 › 专栏 › 技术社区 › Marc Gravell

如何使用HTML和CSS编写预览窗格(主/详细)

css html

Marc Gravell · 技术社区 · 17 年前

预期的用例是,用户可以在顶部窗口中滚动,同时始终能够看到预览/详细信息窗口(我打算通过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呢?(尤其是在两个窗口上获取滚动条)。

3 回复 | 直到 8 年前

TylerH Ash Burlaczenko 8 年前

好吧,如果你真的在使用windows,那么听起来就像你在谈论框架,甚至是iFrame。

一个简单的代码示例:

#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%的高度,但跨越窗口的整个宽度。滚动条将自动设置在窗格上,即使不需要(在这种情况下,滚动条被禁用)

TylerH Ash Burlaczenko 8 年前

overflow:scroll . 这将允许你做你想做的事情,而不必求助于像框架这样复杂的东西(除非这是你需要的)。

试着这样做:

<!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>

TylerH Ash Burlaczenko 8 年前

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