6

在 CSS 3 中放置页眉和页脚的正确方法是什么？我正在阅读http://www.w3.org/TR/css3-gcpm/并且我想知道以下是否是对如何使用运行元素的正确解释。

运行元素具有从文档的正常“流”转移的属性，页眉和页脚需要它。

这是我试图实现的重要部分，否则有一个字符串集属性可用于命名一个部分并在页边距的其他地方使用它。我也很好奇 3rd 方实现是否支持它们？我知道某些工具中有一些类似的标记，但我想知道这是否是 CSS 试图表达的意思？

<!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/ - 当然浏览器不会显示它，因为它是用于分页媒体的。

我在一些 HTML-PDF 转换器中尝试这样做，以查看它们在多大程度上符合 CSS 3，但显然它们都没有呈现这一点。根据 Css3 定义，我的标记是否正确？

4

3 回答 3

6

我相信你的语法是正确的。但是我还没有看到浏览器支持它。我看过的大多数商业 HTML 到 PDF 工具（Winnovation、DynamicPDF、EvoPDF、RasterEdge、wkhtmltopdf 等）都使用 WebKit 或其他不支持 CSS3 Paged Media 的布局引擎。

我认为这些虽然...

于 2014-02-01T04:14:36.927 回答
1

只是为了确认@theChrisMarsh 的答案，语法是正确的。

我有使用Flying Saucer的直接经验，虽然它仅支持 CSS 2.1，但包括对分页媒体的 CSS-3 样式运行元素的支持。浏览器当然不会对它做任何事情，因为它们是，@media print尽管如果您尝试打印它可能会有所不同（但例如，Firefox 打印预览在 FF 27.0 中很糟糕）。

于 2014-02-12T18:05:17.473 回答
0

我一直认为 <header> 应该在 <body> 标签打开后不久位于顶部，而 <footer> 应该在 <body> 标签关闭之前位于底部。他们的定位取决于您希望如何布置网站。

于 2013-12-21T10:56:40.053 回答