Geek Answers Handbook

Html / css: best way to record preview area (master / detail)

It has been a while since I wrote html full-time; -p

In the modern era of css, etc., what is the preferred way to create a pair of panels (for example, preview windows, for example, in Outlook or for master / part views)? Ideally, when will the top (main) panel get scroll bars, etc.?

The alleged use case is that the user can scroll in the upper window, always having the opportunity to see the preview window / detailed description (I intend to load the data for the selected row into the lower panel via jQuery).

In the old world (table layouts), I might have something like:

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

So how to translate this to css? (and, in particular, getting scroll bars on two windows).

+3
3

, , , iFrames.

, , , "", . "" css "", , , .

:

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

CSS :

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

"" (), 50% , . , ( .)

+7

- (, div) 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>
+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>
+3
source

More articles:


All Articles