テクノロジーが進歩し、思考が発展し、そしてWebページ上のパターンはもちろん毎日流行になるでしょう。 "ローリングキャラクター"では、 "マーキー"が一般的になっていますが、Webページを新しいトリックに変更することはできますか？はい、今日、スタイルを使用してトップページとページを動的に作成する方法を学びます。足と改ページ、興味がありますか。
ディスカッションフォーラムを注意深く読むとき、HTMLページにヘッダーとフッターをプログラムで作成して挿入しようとしている開発者から質問を読みます。改ページブラウザの現在の空白、ページサイズなどの設定を把握するのは難しいため、これはあなたの出力がどうなるかを考慮に入れていません。あなたが本当に指定された幅と改ページを強制したいのであれば、あなたはそうすることができます。
これを行う1つの方法は、TABLEを使用することです。この記事では、ヘッダーとフッターをページに動的に挿入してフォーマット済みページを形成する方法を説明します。 （注：ここではIE 6.0を使用してコードをテストしています。IE 5.0以降はSTYLE要素で使用できる@media疑似クラスを使用しているため、ブラウザ5.0以上でも使用できます。）
これを行う最も簡単な方法はTABLEを使うことです。ただし、フォーマット済み出力には別々の行が含まれている必要があり、それらは印刷ページの高さを超えることはできません。また、TABLEは印刷ページの幅を超えてはいけません。あなたは風景や肖像画を制御することができないので、あなたはいくつかの仮定をしなければなりません。文書の向きは縦、左右の余白は1 "（2.54 cm）、上下の余白は0.25"（0.64 cm）、用紙サイズは8.5 "（21.59 cm）×11"（27.94 cm）とします。つまり、出力の合計幅は6.5インチ（16.51 cm）なので、TABLEの幅は6.5インチ（境界なし）に設定する必要があります。テーブルの上部に、上部とフッターとして機能する2つの隠しDIVを作成します。 DIVには幅と高さが設定されており、オーバーフロースタイルプロパティはhiddenに設定されています。これはあなたの出力の基礎を築くものです。改ページ、ヘッダー、およびフッターを作成するには、ページロードにJavaScriptを追加する必要があります。
フォーマットされた出力を作成するというアイデアは、ヘッダーとフッターのDIVSを隠し行にコピーすることです。ただし、@ media printの表示スタイルをインラインに設定する必要があります。また、トップの前にTRのpage-break-afterスタイルプロパティをalwaysに設定する必要があります。
BODY onloadイベント中に、すべての行を繰り返し処理して、行のoffsetTopとoffsetHeightがページの使用可能な長さを超えているかどうかを確認します。使用可能な長さは、ページの長さから上部、フッター、および上部と下部の空白の合計の高さを引いたものです。したがって、トップページの高さとフッターの高さが1 "の場合、上下の空白は0.25"、ページの長さは11 "、使用可能な幅は8.5"：11 - （1 x 2） - （０．２５×２）＝ ８．５。このタスクを実行するためのHTMLコードは次のとおりです。上のサンプルコードを見ると、ヘッダーとフッターがTABLE要素の前に配置された2つのDIVであることがわかります。 TABLE tbl1には複数のTRが含まれています。各行はt1として識別され、allコレクションを使用してそれらを繰り返し処理するのに役立ちます。この例は、2行を超えるページにのみ使用できます。これらの項目をいつ表示するかを識別するためのhdrftrを作成しました。 JavaScriptコードはこの機能がどのように作成されたかを詳しく述べています。
最初に、一番上の行がテーブルの一番上に追加されます。次に各行をチェックして、最上部の座標と行の高さ、フッターの高さ1 * screen.deviceYDPI、または単にscreen.deviceYDPI - mdashの合計の高さとの合計を決定します。この値が有効な高さと一致すると、現在の行はその後に改ページを入れるように設定されます。この値が有効な高さを超えると、前の行の後に改ページが配置されます。その後、関連する行の後にフッターが続き、その後にフッターが続きます。このプロセスはすべての行がチェックされるまで続きます。最後に、フッター行がテーブルの末尾に追加されます。フッタ行には、ブラウザが誤って改ページしてエラーが発生するのを防ぐための絶対位置が含まれています。さらに、後続の各ページには、追加した追加のヘッダー行用に準備する必要があります。（page - 1）* 1、（page - 1）は後続のページ数、1は上部の高さです。 。
上の小さなシリーズは、フォーマットされたページを形成するためにページにヘッダーとフッターを動的に挿入する方法を示しています。あなたは学びましたか？