css html页脚答案

【问题标题】：css html footercss html页脚
【发布时间】：2010-07-28 03:45:16
【问题描述】：

我正在重写这个问题以更好地传达问题：

我有 3 种输出机制：

屏幕
PDF
打印

使用与屏幕相同的媒体类型生成 PDF。

在屏幕上：我只想让页脚出现在内容下方...简单...简单！

PDF：我希望页脚显示在内容最后一页的底部

打印：如上，我希望页脚显示在内容最后一页的底部

问题是：如果我为 media type=print 设置绝对定位有两个问题：

这对 PDF 显示没有影响
如果内容跨越多个页面，则内容将打印在固定在第一页底部的页脚下方。

如果在屏幕上 - 我需要在虚构页面的底部显示页脚，以便在生成 pdf 时，它会出现在内容最后一页的底部

如果在打印 - 我需要在最后一页内容的底部显示页脚

【问题讨论】：

什么是页脚？它是一个div吗？如果是这样，并且它已经在文档的末尾（源代码方面），它应该已经出现在底部。忽略绝对定位（如果页面大小不固定则不起作用），具体是什么问题？
是的，页脚的绝对位置不是一个好的解决方案。
看看@gutch 的回答。它向您展示了如何为 PRINT 设置一种布局，而为普通设置一种布局。
我已经有一个打印和一个普通的。
您究竟是如何生成 PDF 的？另外，如果你只想要内容下方的页脚，为什么还要使用绝对定位？

标签： html css footer

【解决方案1】：

您可以为页面定义 2 个样式表； 1 表示“屏幕”，1 表示“打印”。以这种方式链接到它们：

<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

这样您就可以完全分离每个设备应如何呈现您的页面。

【讨论】：

如何从 HTML 页面生成 PDF？你在使用某种组件吗？您总是可以在您的网站上打开一个新窗口的“打印友好”按钮。这有点无聊，但肯定会成功。
PDFCrowd 使用 HTML 生成 PDF 我可以毫无问题地“友好”打印问题在于页脚定位。
我认为您可以通过在结束

【解决方案2】：

您绝对应该查看http://www.cssstickyfooter.com/。这是一个出色的现代“粘性页脚”解决方案。至少，它应该可以帮助您朝着正确的方向前进。

【讨论】：

当我开始输入/审查该技术时没有答案。没有踩任何脚趾的意思。任何喜欢该链接的人，请注明 rockinthesixstring

【解决方案3】：

您可以通过为打印文档使用单独的 CSS 样式表来实现此目的。 CSS 媒体类型允许您为打印文档（和许多其他表示形式）指定单独的规则。

如果这是唯一需要特殊处理的样式，那么您可以将打印样式放在现有样式表中，如下所示：

#footer { position: static; }

@media print {
    #footer { position: absolute; bottom: 0; }
}

如果您有很多特定于打印的规则，请将它们放在单独的样式表中，并将两个样式表都包含在 HTML 中，如下所示：

<link rel="stylesheet" type="text/css" href="all.css">
<link rel="stylesheet" type="text/css" media="print" href="printonly.css">

当显示在屏幕上时，只会使用 all.css 样式表；打印时将使用 all.css 和 printonly.css 样式表——因此您无需在两个文件中复制样式，只需添加特定于打印机的样式printonly.css.

有用的参考：

http://www.w3.org/TR/CSS21/media.html

【讨论】：

我不认为他指的是@media print 中的“打印”，而是“显示”——尽管我可能是错的。
哎呀.. 看来您毕竟是对的。 OP已经编辑了他的问题，它指的是@media print
我可以将两者分开（媒体和打印），但是我无法让它们中的任何一个打印（显示）我想要的...问题不在于分离媒体类型 - 它正在尝试获取媒体类型来做我需要的......
实际上，我认为我在上面的答案中确实混淆了@media print 和@media display……但似乎 OP 已经控制了这部分，问题出在样式本身。

【解决方案4】：

使用单个容器 css 类。
在页眉和正文容器之后添加页脚。
将容器高度设置为 100%，页脚类将出现在底部。

【讨论】：

【解决方案5】：

~~我认为您可能正在寻找的是CSS Sticky Footer~~

最终你的页脚需要在你的包装之外

页面

<div id="wrap">
    <div id="main"></div>
</div>
<div id="footer"></div>

CSS

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/

直接取自 cssstickyfooter 网站。

在 OP 编辑他的答案以解释他正在寻找印刷品之前，我发布了我的答案。

【讨论】：

致反对者 - 我的回答是在 OP 编辑他的原始问题之前发布的。