Подтвердить что ты не робот

Поднимите нижний колонтитул стола на последней странице

Я использую таблицу для создания нижнего колонтитула на каждой странице (работает в Firefox, это достаточно).

A JS Fiddle: https://jsfiddle.net/j9k2xzze/

(щелкните правой кнопкой мыши на панели вывода → Этот кадр → Открыть фрейм в новой вкладке, а затем Предварительный просмотр будет работать как обычно)

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

Но на последней странице нижний колонтитул отображается непосредственно под текстом. Если текст короче, чем последняя, ​​нижний колонтитул привязан к нему.

Мне нравится, что нижний колонтитул находится на самой нижней части последней страницы. К сожалению, расширение @page не работает в firefox, или я делаю это неправильно:

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}
4b9b3361

ОТВЕТЫ

Ответ 1

Если вы поддерживаете только Firefox, это действительно просто. (Перейдите к редактированию, чтобы увидеть технику, которая также работает в IE, но менее универсальна. Chrome и другие браузеры webkit не поддерживали повторяющиеся нижние колонтитулы, когда я опубликовал этот ответ, поэтому я не проверял их).

Все, что вам нужно сделать, это добавить большое нижнее поле в конце вашего контента. Точный размер не имеет значения, но он должен быть достаточно большим, чтобы гарантированно проходить через конец страницы. Я рекомендую сделать его как минимум таким же большим, как максимальный размер бумаги, который, как вы думаете, будут использовать ваши пользователи.

Не волнуйтесь, это не добавит пустую страницу в конец вашего документа. Поля отличаются от других форм пробелов (таких как теги padding и <br>) тем, что они удаляются, когда они выходят за границы страницы (см. Спецификацию, раздел 13.3.3). И Firefox, и IE будут удалять поля, но Firefox по-прежнему будет генерировать нижний колонтитул внизу страницы, как если бы произошел разрыв страницы. (IE, с другой стороны, ведет себя так, как если бы поля никогда не было, поэтому этот подход не работает в этом браузере.)

Вы можете поместить поле на псевдоэлемент, чтобы сохранить HTML-порядок, и вы можете использовать @media print чтобы он не отображался на экране.

Здесь код. Чтобы увидеть, как он работает в Firefox, откройте этот jsfiddle, щелкните правой кнопкой мыши вывод, выберите "Этот кадр"> "Показать только этот кадр" и выполните предварительный просмотр.

@media print {
  #content:after {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest paper size you support */
  }
}
<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>PAGE FOOTER</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td id="content">
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

Ответ 2

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

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

Если вам действительно нужен нижний колонтитул внизу каждой страницы, я бы рекомендовал сначала сгенерировать pdf и распечатать его. Если вам нужно распечатать сложные вещи, вы все равно будете в первую очередь генерировать pdf, print css очень ограничена.

Ответ 3

Это забавный вопрос, который никогда не встречал/не нуждался в этом, поэтому я тоже узнал что-то новое. Но вот мое рабочее решение вкратце (вы на самом деле довольно близко):

С #wrapper { position: relative }, #header, #footer и #content { position: absolute }, а дополнительные правила размещения и высоты определяют ваш CSS ( HTML без изменений) вы полностью контролируете макет. Ваш код может выглядеть примерно так:

Ниже приведен фрагмент, jsFiddle: fiddle и  скриптовый выходной кадр

html,body { height: 100%; width: 100%; overflow: hidden }

#wrapper {
    position: relative;
    height: 95%; width: 100%;
}
#wrapper #header {
    position: absolute;
    top: 0;
    height: 100px;
}
#wrapper #content {
    position: absolute;
    top: 100px;
}
#wrapper #footer {
    position: absolute;
    bottom: 0;
}

@media print {
    h1 {
      page-break-before: always;
    }

    @page {
      size: A4;
      margin: 0;
    }
}
<table id="wrapper">
    <thead>
    <tr>
        <td id="header">HEADER TEXT</td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="https://unsplash.it/200?image=031" />
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            Welcome
            <h1>NEXT PAGE</h1>
            just one line
        </td>
    </tr>
    </tbody>
    
</table>

Ответ 4

Привет, я просто добавил следующий медиа-запрос к вашему CSS. И это РАБОТЫ

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

Проверьте следующий скрипт

https://jsfiddle.net/jjsqgaza/