hel*_*ker 5 html css layout css3 multipage
我非常希望创建一个网页,当缩放级别较小时,它会显示与Microsoft Word或Acrobat Reader相同的外观,并显示带有页面边框的并排页面.
我不知道该怎么做是定义一个固定大小的paperborder并将内容扔进其中(这将是一个可变数量的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>