CSS: Удалите нижний файл @page на первой страницеHtml

Программисты Html
Ответить
Anonymous
 CSS: Удалите нижний файл @page на первой странице

Сообщение Anonymous »

Я определил страницу HTML/CSS для печати, в которой используются функции CSS @Page, чтобы определить заголовок и нижний колонтитул.
На первой странице я не хочу нижний колонтитул. Здесь удалите заголовок с первой страницы HTML -сгенерированного PDF - CSS. Описано, как я удаляю нижний колонтитул в смысле «не показывать его». Это работает, но, к сожалению, какое -то место по -прежнему зарезервировано для нижнего колонтитула. Когда я захочу разместить элемент близко к концу титульного страницы, он не будет работать, он будет обернут на следующую страницу. Я использую Weasyprint для перевода HTML/CSS в PDF.
html:




test




some header left

some header right




some content

some more content


Section 1
Section 2
Section 3



< /code>
css: (класс с низким уровнем детективы имеет свойство с полом. Когда вы удаляете комментарий, элемент будет перенесен на следующую страницу) < /p>
body {
font-family: 'Arial';
margin: 0px;
}

* {
margin: 0;
padding: 0;
white-space: nowrap;
}

@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}

html, body {
width: 297mm;
height: 210mm;
}
}

@page {
size: A4 landscape;
margin-top: 90px;
margin-left: 0;
margin-right: 0;

/*
* Header
*/
@top-left{
content: element(header-left);
/* margin-top: 27mm; */
}

@top-center{
height: 90px;
}

@top-right{
content: element(header-right);
height: 90px;
}

/*
* Footer
*/
@bottom-right {
content: element(footer-right);
background-color: yellow;
margin-top: 20px;
padding-right: 34px;
width: 450px;
height: 50px;
}

@bottom-center{
content: counter(page) ' / ' counter(pages);
background-color: yellow;
margin-top: 20px;
font-family: 'Arial';
color: white;
width: 222px;
height: 50px;
}

@bottom-left{
content: string(heading);
background-color: yellow;
margin-top: 20px;
padding-left: 35px;
font-family: 'Arial';
color: white;
width: 450px;
height: 50px;
}
}

/*
* Title page, we remove the footer here
*/
@page:first {
@bottom-right {
content: normal;
}

@bottom-center{
content: normal;

}

@bottom-left{
content: normal;
}
}

/*
* Header
*/
.header-left {
position: running(header-left);
width: 800px;
margin-left: 35px;
}

.header-right {
position: running(header-right);
margin-right: 35px;
margin-top: 10px;
}

h2 { string-set: heading content() }

.footer-right {
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;
position: running(footer-right);
}

.main-image-and-sub {
margin-left: 5px;
margin-top: 20px;
height: 496px;
}

.lower-detail-box {
display: flex;
justify-content: space-between;
align-items: center;

height: 111px;
/* margin-top: 10px; */

margin-left: 35px;
margin-right: 33px;

background-color: lightblue;
}


Подробнее здесь: https://stackoverflow.com/questions/681 ... first-page
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»