Оставьте место в верхней части каждой печатной страницы

Итак, у меня есть заголовок, который должен отображаться в верхней части каждой страницы, когда пользователь печатает этот сайт. Я устанавливаю позицию фиксированной, чтобы она отображалась в верхней части каждой страницы, но проблема в том, что заголовок теперь перекрывает часть содержимого в верхней части. Заголовок - это статический размер, поэтому, если бы я мог просто поместить запас X числа пикселей в верхней части каждой страницы, что бы решить мою проблему, но я не могу найти способ сделать это. Благодарю.Оставьте место в верхней части каждой печатной страницы

Пример кода: HTML

<header>This should be at the top of every printed page</header> 
<section id="content">*Multiple pages of text*</section>

CSS

header { 
position:fixed; 
top:-10; 
height:20px; 
} 

#content { 
left:0px; 
overflow:visible; 
position:relative; 
/*top:52px;*/ 
width:98%; 
}

«Верхний: 52px» работал, чтобы получить содержимое, чтобы избежать заголовка, но это также вызывает некоторые строк текста быть срезанным посередине разрывом страницы, поэтому он прокомментирован.

Новая информация: Что-то интересное Я узнал о линии «top: 52px»: на самом деле она не перемещает контент на 52 пикселя, он как бы скрывает верхний 52px контента на каждой странице. Я заметил это, когда я отключил отображение заголовка, и заметил, что значительная часть моего содержимого все еще отсутствует.

Примечание: Я открыт для javascript или jquery-решений, если таковой существует.

источник

2013-09-06 Surgery

Просьба привести пример кода, показывающего, что вы пробовали до сих пор. Вы используете таблицу стилей css или делаете это inline? –

Добавлен пример кода. У меня есть таблица стилей печати. – Surgery

Частично решена: Я установил значение отображения #content в «table-cell» и установил верхнее и нижнее заполнение. Это заставляет его оставлять пространство вверху и внизу каждой страницы. Почти идеальный. Проблема в том, что, по-видимому, элементы «table-cell» не прослушивают никаких настроек ширины, и у меня есть контент, исчезающий с правого края страницы. Так близко, так близко. – Surgery

Наконец понял это:

#content { 
    position:relative; 
    display:table; 
    table-layout:fixed; 
    padding-top:20px; 
    padding-bottom:20px; 
    width: 94%; 
    height:auto; 
}

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

источник

2013-09-09 18:30:25 Surgery

Много различных способов сделать это, один быстрый способ будет просто использовать тег Div и установить маржу-топ, чтобы тем не менее много пикселей вы хотите:

<div style="margin-top:20px"></div>

источник

2013-09-06 16:47:19 Dod

Пробовал это, и только первая страница имеет запас. – Surgery

просто добавить в #content:

#content { 
    margin-top: 50px; // however many pixels you need 
}

источник

2013-09-06 17:05:08 frydoubt

Работает только на первой странице печати. На каждой другой странице контент попадает прямо вверх. Я нацелен на Firefox 17, если это имеет значение. – Surgery

Если это так, проверили ли вы, что все содержимое других страниц завернуто с идентификатором #content? – frydoubt

Да, это так. Что-то интересное я узнал о линии «top: 52px»: на самом деле он не перемещает контент на 52 пикселя, он как бы скрывает верхний 52px контента на каждой странице. Я заметил это, когда я отключил отображение заголовка, и заметил, что значительная часть моего содержимого все еще отсутствует. Я добавляю эту новую информацию в OP тоже. – Surgery

Я думаю, вы должны прочитать о CSS @media печати и @page маржи правила собственностиhere.

источник

2014-01-27 11:11:47 tetri

Оставьте место в верхней части каждой печатной страницы

ответ

Смежные вопросы