Имитация многостраничного документа в CSS3
Я бы очень хотел создать веб-страницу, которая имела бы такой же внешний вид, как, скажем, Microsoft Word или Acrobat Reader, при небольшом уровне масштабирования и отображении страниц рядом с границы страницы.
Я понятия не имею, что делать, так это определить рамку для бумаги фиксированного размера и поместить в нее содержимое (которое может быть переменным количеством элементов блока HTML) и заставить эти элементы «перетекать» с одной страницы на другой - создание необходимого количества страниц с соответствующими разрывами страниц. Это предназначено для имитации вывода на печать, для быстрого прототипирования дизайна.
Что-то в моей голове подсказывает, что JavaScript будет необходим, но поскольку мои знания о JavaScript близки к нулю, и я вряд ли хочу изучать трюки с макетом CSS3, чистый CSS был бы предпочтительнее (хотя решение JS было бы хорошей альтернативой) .
Текущий одностраничный документ выглядит следующим образом:
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Relatório Html</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background-color: #aaa;
}
.paperpage {
position: absolute;
width: 600px;
padding: 50px 30px 40px 30px;
margin-left: -320px;
left: 50%;
top:10px;
bottom:10px;
background-color: white;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
#innerpage {
position: relative;
margin: 0 auto;
height: auto !important;
min-height: 100%;
}
</style>
</head>
<body>
<div class="paperpage">
<div id="innerpage">
<p>Some Content</p>
</div>
</div>
</body>
</html>