定位内容当前根据主要内容容器或body元素放置.为确保没有重叠,请为页面添加边距,然后对内容进行负面定位以将其移动到正文(#header { position: fixed; top: -50px; left: 0px; right: 0px; height: 50px; })之外.
例如:
<html>
<head>
<style>
@page { margin: 50px; }
body { background-color: #c0ccff; padding: 1em; }
#header { position: fixed; top: -50px; left: 0px; right: 0px; height: 50px; background-color: orange; padding: .5em; text-align: center; }
</style>
</head>
<body>
<div id="header">HEAD</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor gravida enim, id sollicitudin eros ullamcorper a. Cras vitae convallis dolor. Maecenas eget fermentum magna. Donec gravida neque vel sapien congue consequat. Nulla facilisi. Sed volutpat dui et nibh posuere, eu malesuada arcu congue. Cras vehicula elit eros, non tristique leo congue quis. Morbi aliquam scelerisque augue, eu sodales dolor. Integer a commodo nibh. </p>
<div style="page-break-before: always;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor gravida enim, id sollicitudin eros ullamcorper a. Cras vitae convallis dolor. Maecenas eget fermentum magna. Donec gravida neque vel sapien congue consequat. Nulla facilisi. Sed volutpat dui et nibh posuere, eu malesuada arcu congue. Cras vehicula elit eros, non tristique leo congue quis. Morbi aliquam scelerisque augue, eu sodales dolor. Integer a commodo nibh. </p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2725 次 |
| 最近记录: |