css html нижний колонтитул

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

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

  1. Экран
  2. PDF
  3. Распечатать

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

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

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

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

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

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

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

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


html css footer
person php-b-grader    schedule 28.07.2010    source источник
comment
Что такое нижний колонтитул? Это div? Если это так, и он уже находится в конце документа (с точки зрения источника), он уже должен появиться внизу. Игнорирование абсолютного позиционирования (которое не будет работать, если размер страницы не будет фиксированным), что конкретно происходит не так?   -  person Mike Caron    schedule 28.07.2010
comment
Да, абсолютное положение нижнего колонтитула - не лучшее решение.   -  person Chase Florell    schedule 28.07.2010
comment
взгляните на ответ @gutch. Он показывает вам, как получить один макет для ПЕЧАТИ и один для обычного.   -  person Chase Florell    schedule 28.07.2010
comment
У меня уже есть один для печати и один для обычного.   -  person php-b-grader    schedule 28.07.2010
comment
Как именно вы создаете PDF-файл? Кроме того, почему вы используете абсолютное позиционирование, если вам просто нужен нижний колонтитул под контентом?   -  person NotMe    schedule 28.07.2010
comment
Крис: 1. Создание PDF с помощью PDFCrowd 2. Мне нужен только нижний колонтитул под содержимым на экране - есть 2 других средства вывода, где я НЕ хочу, чтобы нижний колонтитул чуть ниже содержимого!   -  person php-b-grader    schedule 28.07.2010

Ответы (5)


arrow_upward
2
arrow_downward

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

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

person dana    schedule 28.07.2010
comment
Как вы создаете PDF-файл из HTML-страницы? Вы используете какой-то компонент? У вас всегда может быть кнопка для печати на вашем веб-сайте, которая открывает новое окно. Это довольно скучно, но наверняка поможет. - person dana; 28.07.2010
comment
PDFCrowd для создания PDF с использованием HTML Я могу без проблем печатать. Проблема заключается в расположении нижнего колонтитула. - person php-b-grader; 28.07.2010
comment
Я думаю, вы могли бы сделать это, объявив свой нижний колонтитул в ‹div› непосредственно перед закрывающим тегом ‹/body›. Для макета экрана используйте абсолютное позиционирование. Для макета печати используйте положение по умолчанию, при котором нижний колонтитул будет естественным образом отображаться внизу страницы. Наконец, я никогда раньше не использовал PDFCrowd, но похоже, что есть параметр use_print_media (из pdfcrowd.com / doc / api), который может указывать, какую таблицу стилей использовать. - person dana; 29.07.2010
comment
Хорошо, Дана - хорошая находка ... Это определенно решает вопрос 1 в моем вопросе ... Спасибо !!! Пункт 2 по-прежнему остается проблемой, если контент занимает более одной страницы (при абсолютном позиционировании нижний колонтитул располагается внизу первой страницы ...) - person php-b-grader; 30.07.2010

arrow_upward
1
arrow_downward

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

person Justin Lucente    schedule 28.07.2010
comment
Когда я начал набирать / анализировать технику, ответов не было. Не хотел наступать на пальцы. Всем, кому понравилась эта ссылка, пожалуйста, укажите rockinthesixstring - person Justin Lucente; 28.07.2010

arrow_upward
1
arrow_downward

Этого можно добиться, создав отдельную таблицу стилей 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

person gutch    schedule 28.07.2010
comment
Я не думаю, что он имел в виду печать, как в @media print, а скорее отображение - хотя я могу ошибаться. - person Chase Florell; 28.07.2010
comment
упс ... похоже, ты все-таки прав. ОП отредактировал свой вопрос, и он относится к @media print - person Chase Florell; 28.07.2010
comment
Я могу разделить два (медиа и печать), однако я не могу заставить ни один из них печатать (отображать) так, как я хочу ... Проблема не в разделении типов медиа - он пытается заставить типы медиа делать то, что мне нужно. .. - person php-b-grader; 28.07.2010
comment
На самом деле я думаю, что в моем ответе выше @media print и @media display перепутались ... но похоже, что OP контролирует эту часть, проблема заключается в самих стилях. - person gutch; 29.07.2010

arrow_upward
0
arrow_downward

  1. Используйте один контейнерный класс css.
  2. Добавьте нижний колонтитул в конец после контейнеров header и body.
  3. Установите высоту контейнера на 100%, и класс нижнего колонтитула появится внизу.
person loxxy    schedule 28.07.2010

arrow_upward
0
arrow_downward

Я думаю, что вы, возможно, ищете 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.

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

person Chase Florell    schedule 28.07.2010
comment
к тому, кто проголосовал против - мой ответ был опубликован до того, как OP редактировал его исходный вопрос. - person Chase Florell; 28.07.2010