Как написать панель предварительного просмотра (мастер / деталь) с помощью HTML и CSS
В современную эпоху 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? (и, в частности, получение полос прокрутки в двух окнах).
Ответы 3
Что ж, если вы на самом деле используете окна, то это похоже на то, что вы говорите о фреймах или даже iFrames.
Однако я предполагаю, что когда вы говорите «окно», вы просто имеете в виду идею прокручиваемой области. Для этого для свойства css «переполнение» можно установить значение «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% высоты, но занимающие всю ширину окна. Полосы прокрутки будут автоматически устанавливаться на панелях, даже если они не нужны (в этом случае они отключены).
Есть много хороших способов сделать это - вы можете использовать любой элемент уровня блока (например, 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><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 хороших ответа. Я бы, вероятно, использовал класс, а не совпадение идентификатора, но это не важно для сути ответа. Еще раз спасибо.