我對內容的位置有很大的問題。我有大量隱藏在頁眉和頁腳下的內容。我想每個頁面都有一個頁眉/頁腳的頁邊/底部頁邊。內容的頁眉和頁腳...我該如何解決這個問題?
這裏是我的HTML文檔:
@page {
margin: 180px 50px;
}
#header {
position: fixed;
left: 0px;
top: -180px;
right: 0px;
height: 300px;
background-color: orange;
text-align: center;
}
#footer {
position: fixed;
left: 0px;
bottom: -180px;
right: 0px;
height: 300px;
background-color: lightblue;
}
#footer .page:after {
content: counter(page, upper-roman);
}
section {
margin-top: 100px;
}
<div id="header">
<h1>Widgets Express</h1>
</div>
<div id="footer">
<p class="page">Page </p>
</div>
<section>
What is Lorem Ipsum?
<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br>Why do we use it?
<br>It is a long established fact that a reader will be distracted by <br>the readable content of a page when looking at its layout.
<br>The point of using Lorem Ipsum is that it has a more-or-less normal <br>distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
<br>Many desktop publishing packages and web page editors now use Lorem <br>Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
<br>Various versions have evolved over the years, sometimes by accident,<br> sometimes on purpose (injected humour and the like).
<br>Where does it come from?
<br>Contrary to popular belief, Lorem Ipsum is not simply random text.
<br>It has roots in a piece of classical Latin literature from 45 BC, <br>making it over 2000 years old.<br>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.<br>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.<br>This book is a treatise on the theory of ethics, very popular during the Renaissance.<br>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
<br>The standard chunk of Lorem Ipsum used since the 1500s is reproduced <br>below for those interested.<br>Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H.<br>Rackham.
<br>Where can I get some?
<br>There are many variations of passages of Lorem Ipsum available, <br>but the majority have suffered alteration in some form, by injected hum<br>our, or randomised wo<br>rds which don't look <br>even slightly believable.<br>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.<br>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.<br>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.<br>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
<br>5
<br>paragraphs
<br>words
<br>bytes
<br>lists
<br>Start with 'Lorem
<br>ipsum dolor sit amet...'
<br>Generate Lorem Ipsum
</section>
所生成的PDF看起來是這樣的:http://3.1m.yt/28MKkWG.png
截屏是代碼不是代碼。 – PeeHaa
沒有jsfiddle鏈接,我們可以看到你的代碼並運行它..如何修復它? –
尋求代碼幫助的問題必須包括在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **](https://blog.stackoverflow.com/2014/09/introducing-可運行的JavaScript-CSS-和HTML的代碼段/)。請參見[**如何創建最小,完整和可驗證的示例**](http://stackoverflow.com/help/mcve) –