CSS HTML нижний колонтитул - PullRequest
Новая
       7

CSS HTML нижний колонтитул

0 голосов
/ 28 июля 2010

Я переписываю этот вопрос, чтобы лучше передать проблему:

У меня есть 3 механизма вывода:

  1. Экран
  2. PDF
  3. Печать

Файлы PDF создаются с использованием того же типа носителя, что и на экране.

На экране: я просто хочу, чтобы нижний колонтитул отображался под содержимым ... Просто ... просто!

PDF: я хочу, чтобы нижний колонтитул отображался внизу последней страницы содержимого

Печать: Как и выше, я хочу, чтобы нижний колонтитул отображался внизу последней страницыcontent

Проблема заключается в следующем: если я установил абсолютное позиционирование для типа носителя = печать, возникнут две проблемы:

  1. Это не влияет на отображение PDF
  2. Еслисодержимое распространяется на несколько страниц, содержимое печатается под нижним колонтитулом, который зафиксирован внизу первой страницы.

Если на экране - мне нужен нижний колонтитул для отображения внизу воображаемой страницы, чтобычто при генерации pdf она появляется внизу последней страницысодержимого

При печати - нижний колонтитул должен отображаться внизу последней страницы содержимого

Ответы [ 5 ]

2 голосов
/ 28 июля 2010

Вы можете определить 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">

Таким образом, у вас есть полное разделение того, как каждое устройство должно отображать вашу страницу.

1 голос
/ 28 июля 2010

Этого можно добиться, имея отдельную таблицу стилей CSS для печатных документов. CSS Media Types позволяют вам задавать отдельные правила для печатных документов (и многих других представлений).

Если это единственный стиль, требующий специальной обработки, вы можете поместить стиль печати в существующую таблицу стилей следующим образом: 

#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

1 голос
/ 28 июля 2010

Вы обязательно должны проверить http://www.cssstickyfooter.com/. Это отличное, современное решение с «липким подносом»Как минимум, это должно помочь привести вас в правильном направлении.

0 голосов
/ 28 июля 2010
  1. Используйте один контейнерный класс css.
  2. Добавьте нижний колонтитул в конец после контейнеров заголовка и тела.
  3. Установите высоту контейнера на 100%, и класс нижнего колонтитула появится внизу.
0 голосов
/ 28 июля 2010

Я думаю, что вы можете искать это 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.

Я опубликовал свой ответ до того, как ОП отредактировал его, чтобы объяснить, что он ищет печать.

...