css_position_fixed.html 8.0 KB

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