当前位置: 动力学知识库 > 问答 > 编程问答 >

css - If window height is too small the footer is not printing in safari

问题描述:

I am trying to do a fixed footer but in Safari it's not working but it works in Firefox and Chrome. I have created a code that is reproducing this issue. The code has been taken from mdn.

/*** Print sample ***/

/* defaults for screen */

body{height:100% !important;

}

#print-head,

#print-foot {

display: none;

}

/* print only */

@media print {

h1 {

page-break-before: always;

padding-top: 2em;

}

h1:first-child {

page-break-before: avoid;

counter-reset: page;

}

#print-head {

display: block;

position: fixed;

top: 0pt;

left:0pt;

right: 0pt;

font-size: 200%;

text-align: center;

}

#print-foot {

display: block;

position: fixed;

bottom: 0pt;

right: 0pt;

font-size: 200%;

}

#print-foot:after {

content: counter(page);

counter-increment: page;

}

} /* end print only */

<!DOCTYPE html>

<html>

<head>

<title>Print sample</title>

<link rel="stylesheet" href="syle4.css">

</head>

<body>

<h1>Section A</h1>

<p>This is the first section...</p>

<h1>Section B</h1>

<p>This is the second section...</p>

<div id="print-head">

Heading for paged media

</div>

<div id="print-foot">

Page:

</div>

</body>

</html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: