当前位置： 文江博客话题详情

css html 页脚

发布于 2024-09-11 16:24:20 字数 440 浏览 8 评论 0原文

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

我有 3 种输出机制：

  1. 屏幕
  2. PDF
  3. 打印

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

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

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

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

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

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

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

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

原文

I am re-writing this question to better convey the problem:

I have 3 output mechanisms:

  1. Screen
  2. PDF
  3. Print

PDF's are generated using the same media type as screen.

On screen: I just want the footer to appear below the content ... Simple... easy!

PDF: I want the footer to display at the bottom of the last page of the content

Print: As above, I want the footer to display at the bottom of the last page of the content

The problem is: If I set absolute positioning for media type=print there are two problems:

  1. This has no effect of the PDF display
  2. If the content spans over multiple pages, the content prints under the footer which is fixed at the bottom of the first page.

If on screen - I need footer to display at the bottom of an imaginary page so that when the pdf is generated, it appears at the bottom of the last page of content

If on print - I need footer to display at the bottom of the last page of content

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

故人的歌 2024-09-18 16:24:20

您可以为页面定义 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">

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

You can define 2 stylesheets for the page; 1 for "screen" and 1 for "print". Link to them this way:

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

This way you have total separation of how each device should render your page.

回复 原文
野鹿林 2024-09-18 16:24:20

您绝对应该查看 http://www.cssstickyfooter.com/。这是一个优秀的、现代的“粘性页脚”解决方案。至少，它应该有助于引导您走向正确的方向。

You should definitely check out http://www.cssstickyfooter.com/. It's an excellent, modern "sticky footer" solution. At a minimum, it should help lead you in the right direction.

回复 原文
浊酒尽余欢 2024-09-18 16:24:20

您可以通过为打印文档提供单独的 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

You can achieve this by having a separate CSS stylesheet for printed documents. CSS Media Types allow you specify separate rules for printed documents (and many other representations).

If this is the only style that needs special handling then you can put the print style in your existing stylesheet like this:

#footer { position: static; }

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

If you have a lot of print-specific rules, put them in a separate stylesheet and include both stylesheets in your HTML like this:

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

When displayed on the screen only the all.css stylesheet will be used; when printed both the all.css and the printonly.css stylesheet will be used — so you don't need to duplicate your styles in both files, just add printer-specific ones to printonly.css.

Useful reference:

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

回复 原文
紫轩蝶泪 2024-09-18 16:24:20
  1. 使用单个容器 CSS 类。
  2. 将页脚添加到页眉和页脚之后的末尾身体容器。
  3. 将容器高度设置为 100% &页脚类将出现在底部。
  1. Use a single container css class.
  2. Add the footer to the end after header & body containers.
  3. Set the container height to 100% & the footer class will appear at the bottom.
回复 原文
蓝戈者 2024-09-18 16:24:20

我认为您可能正在寻找的是 CSS 粘性页脚

最终您的页脚需要在你的包装器

页面

<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编辑他的答案以解释他正在寻找打印之前我发布了我的答案。

I think what you might be looking for is the CSS Sticky Footer

Ultimately your footer needs to be outside of your wrapper

Page

<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]-->

*/

Taken directly from the cssstickyfooter website.

I posted my answer before the OP edited his answer to explain that he was looking for print.

回复 原文
~没有更多了~

关于作者

梦归所梦

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文