根据内容大小将HTML划分为页面
won*_*mer 5 html css html5 webpage css3
我正在创建一个webapp来编辑文档.每个文档可以有多个页面.每页都有固定的尺寸(我使用的是德国标准纸张尺寸,DIN A4,宽210毫米,高297毫米).因此,我适当地设置我的HTML的正文大小.
该文件看起来很漂亮,我希望它是这样的.我希望网页只有一个主要问题是将我的内容自动分配到div尺寸为DIN A4的页面(例如盒子)中(如上所述).
我怎样才能做到这一点？如果有一个只有CSS的解决方案会很好,但JavaScript也可以.我为您创建了一个CodePen来理解我的问题:示例代码
我希望像Google云端硬盘(文档文档)这样的行为在文档的一页已满时创建新页面.这是一个截图:
HTML
<html>
<body>
<h1>This is the title of the document</h1><b>Table of contents</b>
<ol>
<li>Das Programm</li>
<li>Hintergründe</li>
<li>Vision</li>
</ol>
<p>some random text</p>
</body>
</html>
CSS
html {
background-color: #333;
width: 100%;
height: 100%;
}
body {
font: 15px arial;
width: 210mm;
height: 297mm;
background-color: #fff;
margin: 10px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 25mm 15mm 20mm 35mm;
}
h1 {
margin: 0 0 15px 0;
}
ol {
margin: 0;
}
li {
margin: 10px 0;
}
ann*_*nni -1
据我认为你不能将页面分成不同的页面，但你可以使整个文档可滚动我的意思是你overflow:auto在定义包含文档的div的高度和宽度后添加CSS
#document_carrier{
width:500px;
height:350px;
border:2px solid #ccc;
overflow:auto;
}
你可以根据你的需要设置你的高度和宽度......实际上我的上传按钮只是为了告诉你如何使页面可滚动，但你可以添加其他javascript函数或其他语言函数来上传文件。
js 小提琴演示
| 归档时间： |
|
| 查看次数： |
2643 次 |
| 最近记录： |