如何在@page @左上角聲明div

如何聲明DIV應顯示在每頁的左上角而不是其相對位置。如何在@page @左上角聲明div

我有這樣一個div：

<div id=header>Document</div>

，我想使用CSS像在左上角，以顯示它的每一頁上：

@page { 
    size: 8.5in 11in; 
    margin: 0.25in; 
    border: thin solid black; 
    padding: 1em; 


    @top-left { 
     content: ???? ; 
     } 
}

謝謝。

來源

2010-05-03 olegtim

不

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

工作？見Printing Headers。另外，請查看position: fixed的W3C規範。

編輯：如果我讀了CSS用CSS 2.1規範有關content財產有關Margin Boxes不夠好，在一起3個規格，我不認爲你可以從嵌入您的網頁<div>成保證金的內容盒子，唉。

來源

2010-05-03 20:46:56

沒有，而這將放在左上角頭，這將是網頁內容區域，而不是一個頁邊距框內。對不起，我應該指定這是用於印刷媒體..見http://www.w3.org/TR/css3-page/#page-box-page-rule – olegtim 2010-05-03 21:11:43

@ icon911：不，我的錯，我沒有沒有足夠好地閱讀你的問題（並沒有查看@ @左上角的規則，在你鏈接到CSS3規範之前我不知道） – 2010-05-03 22:48:32

我意識到這個問題是有點老了，但對於像我這樣的人誰到這裏來尋找一種方式來做到這一點，它使用CSS3行駛元件是可能的：http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1

在這個例子中，除了打印以外，所有媒體類型中的標題都隱藏起來。在打印的頁面上，標題顯示在所有頁面的頂部中心，除了顯示h1元素的位置。

<style> 
    div.header { display: none } 
    @media print { 
    div.header { 
    display: block; 
    position: running(header); 
    } 
    @page { @top-center { content: element(header, last-except) }} 
</style> 
... 
<div class="header">Introduction</div> 

<h1 class="chapter">An introduction</div>

來源

2011-12-12 15:50:00 YetAnotherMatt

它在webkit瀏覽器中不起作用....是任何其他解決方案實現相同的 – 2013-07-25 07:04:19

不是我所知道的，對不起（對於延遲的回覆！） – YetAnotherMatt 2013-10-05 09:32:09

是否有支持此功能的瀏覽器？據我所知，這仍然在繪圖桌上。 – 2014-04-08 20:43:41

如何在@page @左上角聲明div

回答

相關問題