问题描述:

What is the correct way to put Header and Footer in CSS 3 ?

I am reading up on http://www.w3.org/TR/css3-gcpm/ and I would like to know if the below is the correct interpretation of how to use running elements .

Running elements has the property of being shifted from the normal "flow" of the document and headers and footers need that .

That is the significant part I am trying to achieve and , otherwise there is a string-set attribute which can be used to name a section and use it elsewhere int he page margins .

I am also curious if 3rd party implementations support them ? I know of some similar markup's in some tools but I want to know if this is what CSS is trying to mean?

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>Testing</title>

<style type="text/css">

div.header {position: running(header)}

div.footer {position: running(footer)}

@page{

@top-center {content: element(header)}

@bottom-center {content: element(footer)}

}

</style>

</head>

<body>

<div class="header"> HEADER </div>

<div class="footer"> FOOTER </div>

<div>

Normal Text

</div>

</body>

<html>

http://jsfiddle.net/VubtS/ - But of-course browsers won't display that since it is for paged media .

I am trying this in some HTML - PDF convertes to see how much they comply with CSS 3 but apparently none of them renders this . Is my markup correct as per the Css3 definition ?

网友答案:

I believe that your syntax is correct. However I am also not seeing browser support for it yet. Most of the commercial HTML to PDF tools I have looked at (Winnovation, DynamicPDF, EvoPDF, RasterEdge, wkhtmltopdf and more) use WebKit or another layout engine that does not support CSS3 Paged Media.

I think these do though ...

  • Prince (It uses it's own layout engine PrinceXML)
  • DocRaptor (It uses PrinceXML as a webservice)
  • RealObjects
  • Antenna House
网友答案:

Just to confirm @theChrisMarsh's answer, the syntax is correct.

I have direct experience with Flying Saucer which, although otherwise only supports CSS 2.1, includes support for CSS-3-style running elements for paged media. Browsers of course don't do anything with it because they are @media print although it might be different if you try to print (but e.g. Firefox print preview is awful as of FF 27.0).

网友答案:

I've always understood it that <header> should go at the top shortly after the opening of the <body> tag and <footer> should go at the bottom just before the closing of the <body> tag. Their positioning depends on how you want to lay out the site.

相关阅读:
Top