Добавление нижнего колонтитула для печати веб-страниц и установки полей

Question

Я хочу добавить нижний колонтитул на страницу HTML, который будет повторяться на всех страницах при печати.Мне удалось добиться этого с помощью этого кода:

@media print {
    p.note {
        bottom: 0; position: fixed; 
    }
}

Но теперь у меня есть проблема с этим параграфом, идущим поверх остальной части копии

Согласно этому Mirosoft статья , это должно работать для меня:

@page :first {
    margin-bottom: 4in;
}

Но это не так, это ничего не меняет ... какие-либо идеи?

Answer 1

Вот решение, которое сработало, CSS это:

@media print {
    p.note {
        display:block;
        bottom:0;
        position:fixed;
        font-size:11px;
    }
}

И все это должно содержаться в отдельном div с этим CSS

#wrapper {
    position:relative;
    bottom:1in;
    margin-top:1in;
    width:974px;
    margin:0 auto;
}

Это сработало отлично!

Answer 2

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

<div id="content"><p>Lorem Ipsum Latin et cetera</p></div>
<p class="note">Footer</p>

Вы хотели бы немного CSS, как это:

#content {margin-bottom:4in}

Answer 3

Как насчет добавления некоторого z-индекса? Кажется, что нижний колонтитул переопределяет последний абзац Также попробуйте использовать

@media print {
    p.note {
        bottom: 0; position: fixed;
margin-top:10px; 
    }
}