暂无描述

css_position_fixed.html 8.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5. <title>Printed document</title>
  6. <style type="text/css">
  7. @page {
  8. margin: 0;
  9. }
  10. body {
  11. margin-top: 3.5cm;
  12. margin-bottom: 1cm;
  13. margin-left: 3.5cm;
  14. margin-right: .5cm;
  15. font-family: sans-serif;
  16. text-align: justify;
  17. }
  18. div.header,
  19. div.footer {
  20. position: fixed;
  21. background: #ddd;
  22. width: 100%;
  23. border: 0px solid #888;
  24. overflow: hidden;
  25. padding: 0.1cm;
  26. }
  27. div.leftpane {
  28. position: fixed;
  29. background: #ddd;
  30. width: 3cm;
  31. border-right: 1px solid #888;
  32. top: 0cm;
  33. left: 0cm;
  34. height: 30cm;
  35. }
  36. div.header {
  37. top: 0cm;
  38. left: 0cm;
  39. border-bottom-width: 1px;
  40. height: 3cm;
  41. }
  42. div.footer {
  43. bottom: 0cm;
  44. left: 0cm;
  45. border-top-width: 1px;
  46. height: 1cm;
  47. }
  48. div.footer table {
  49. width: 100%;
  50. text-align: center;
  51. }
  52. hr {
  53. page-break-after: always;
  54. border: 0;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <div class="header">
  60. <div style="text-align: right;">
  61. Header line 1<br/>
  62. Header line 2<br/>
  63. Header line 3<br/>
  64. Header line 4<br/>
  65. </div>
  66. </div>
  67. <div class="footer">
  68. <div style="text-align: right;">On line footer content aligned to the right. <a href="http://fr.selfhtml.org/css/proprietes/printlayouts.htm">More info on print layouts</a></div>
  69. </div>
  70. <div class="leftpane">
  71. <div style="text-align: center;">
  72. <img src="images/dompdf_simple.png" width="80" style="margin: 1cm;" />
  73. </div>
  74. </div>
  75. <h2>Section 1</h2>
  76. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
  77. risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
  78. ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
  79. massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
  80. nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
  81. amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
  82. in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
  83. pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
  84. in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
  85. blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
  86. et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
  87. pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
  88. hendrerit.</p>
  89. <hr/>
  90. <h2>Section 2</h2>
  91. <p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut
  92. orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius,
  93. ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus
  94. sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer
  95. id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae
  96. elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer
  97. adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et
  98. sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
  99. eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
  100. elementum posuere, metus purus iaculis lectus, et tristique ligula
  101. justo vitae magna.</p>
  102. <hr/>
  103. <h2>Section 3</h2>
  104. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  105. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  106. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  107. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  108. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  109. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  110. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  111. Curabitur eu amet.</p>
  112. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  113. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  114. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  115. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  116. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  117. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  118. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  119. Curabitur eu amet.</p>
  120. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  121. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  122. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  123. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  124. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  125. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  126. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  127. Curabitur eu amet.</p>
  128. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  129. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  130. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  131. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  132. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  133. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  134. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  135. Curabitur eu amet.</p>
  136. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  137. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  138. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  139. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  140. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  141. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  142. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  143. Curabitur eu amet.</p>
  144. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  145. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  146. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  147. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  148. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  149. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  150. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  151. Curabitur eu amet.</p>
  152. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  153. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  154. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  155. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  156. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  157. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  158. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  159. Curabitur eu amet.</p>
  160. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  161. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  162. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  163. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  164. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  165. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  166. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  167. Curabitur eu amet.</p>
  168. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  169. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  170. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  171. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  172. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  173. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  174. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  175. Curabitur eu amet.</p>
  176. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  177. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  178. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  179. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  180. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  181. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  182. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  183. Curabitur eu amet.</p>
  184. </body></html>