Me gustaría mucho crear una página web que tenga el mismo aspecto de, digamos, Microsoft Word o Acrobat Reader cuando el nivel de zoom es pequeño y muestra páginas contiguas con la página fronteras.Simular documento de varias páginas en CSS3
Lo que no tengo idea de qué hacer es definir un paperborder de tamaño fijo y arrojar el contenido dentro de él (que sería una cantidad variable de elementos de bloque html) y hacer que estos elementos "fluyan" desde una página a la otra, creando tantas páginas como sea necesario con los saltos de página apropiados. Esto tiene la intención de simular la salida impresa, para el diseño rápido de prototipos de estudio.
Algo en mi mente dice que javascript sería necesario, pero como mi conocimiento de javascript es casi cero, y no quiero aprender trucos de diseño de CSS3, sería preferible CSS puro (aunque la solución JS sería una buena alternativa)
Un documento de una sola página actual es la siguiente:
<!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>