6

そのため、ユーザーがこの Web サイトを印刷するときに、すべてのページの上部にヘッダーを表示する必要があります。すべてのページの上部に表示されるように位置を固定に設定していますが、ヘッダーが上部近くのコンテンツの一部と重なっていることが問題です。ヘッダーは静的なサイズであるため、すべてのページの上部にマージン 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%;
}

「top:52px」は、コンテンツがヘッダーを回避するように機能しましたが、改ページによってテキストの一部の行が途中で切り取られる原因にもなっていたため、コメント アウトされています。

新しい情報: 「top:52px」行について興味深いことがわかりました。実際にはコンテンツを 52 ピクセル下に移動するのではなく、すべてのページのコンテンツの上部 52 ピクセルを何らかの形で隠しています。ヘッダー表示をなしに設定したときにこれに気付きましたが、コンテンツの大部分がまだ欠落していることに気付きました。

注: javascript または jquery ソリューションが存在する場合は、それを受け入れます。

4

5 に答える 5

1

最後にこれを理解しました：

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

これにより、すべてのページの上部と下部にパディングが配置され、コンテンツが上部または下部から切り取られず、#content が幅の調整を尊重して、ページの右側でコンテンツが切り取られないようにすることができます。

于 2013-09-09T18:30:25.340 に答える
0

#content に追加するだけです。

#content {
    margin-top: 50px; // however many pixels you need
}
于 2013-09-06T17:05:08.247 に答える
0

CSS @media printと@page rule margin プロパティについては、 こちらを参照してください。

于 2014-01-27T11:11:47.917 に答える
0

これを行うにはさまざまな方法がありますが、簡単な方法の 1 つは、div タグを使用して、margin-top を必要な数のピクセルに設定することです。

<div style="margin-top:20px"></div>
于 2013-09-06T16:47:19.037 に答える