1

私はウェブデザインを始めたばかりで、答えを探して、見つけたほとんどすべてを試しましたが、欲しいものを手に入れることができませんでした. わかりました、ブラウザーのページの下部にフッターを貼り付けるには多くの解決策があることを知っています。しかし、私の質問は、ブラウザーでフッターがどのように見えるかではなく、印刷物でどのように見えるかについてです。私のレイアウトは次のようなものです：

<html>
<body>
  <div id="content">
     <table>
       more divs... more content...
     </table>
      <table>
        more divs... more content...
     </table>
     ....
  </div>
  <footer>
     <table>
      ....
     </table>
  </footer>
</body>
</html>

また、私のコンテンツは動的であり、ユーザーの入力に基づいて長くなったり短くなったりする可能性があることに注意してください。ブラウザでは問題はありません。フッターはコンテンツの下部にあります。しかし、印刷物では、このフッターを最後のページの下部に配置したいと考えています (これは主に IE ブラウザーでのみ動作するようにしたいと考えています。IE 7、8、および 9)。そのため、コンテンツが長く、印刷して 3 ページに及ぶ場合、フッターは最後のページの下部にのみ表示する必要があります。これを行う方法を教えてください。スティッキー フッターなどのほとんどのオンライン ソリューションは、コンテンツが長い場合、印刷物では機能しません...印刷プレビューで確認できるように、印刷物ではコンテンツの下部に固定されます。どんな助けでも本当に感謝します。単純な css ソリューションの方が優れていますが、他に何もうまくいかない場合は、初心者でも js や PHP を試す準備ができています。

4

3 に答える 3

2

Ok its been a while but the answer might help someone. Like I said in the question I was required to make it work only in IE. . It works for IE7 8 and 9. And for chrome too I believe.

<html>
<head>
<style type="text/css">
@media print
{

body, html{
    height:100%;
    padding:0;
}
#wrapper{
    position:relative;
    min-height:100%;
}
#lines{
    padding-bottom:40px;
}
#footer{
    position: absolute; 
    bottom: 20px; 
    left: 4px; 
    right: 4px;
}
}

</style>
</head>
<body>

<div id="wrapper">
<div id="header"></div>
<div id="lines">

 //main content here


</div>

<div id="footer">
//Footer content
</div>
</div>

</body>
</html>

In my case I had a long php file which changed the content dynamically everytime and so I wasnt sure if this solution will always work. So I created a body.php with my main content and footer.php with footer content. Then created another php in the format of the above mentioned solution and included the body.php inside the 'lines' div and footer.php in the 'footer' div. Works well. You will have to adjust the padding to 'lines div'

于 2012-11-12T11:04:41.400 に答える
1

ページが長い場合、フッターは最後のページに自動的に印刷されます。印刷用にカスタマイズしたい場合は、特別な css ファイルを使用できます。

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

これは印刷のみに使用され、通常の css ファイルと同じように使用できます。

于 2012-09-29T20:45:33.060 に答える
0

スタイルを使用してこれを実現できます。html5要素はまだすべてのブラウザーでサポートされているわけではないことに注意してください。そのため、要素にアタッチids/classesし、カスタム スタイルを割り当てます。

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Testing</title> 
    <style type="text/css" media="print">
      html, body { margin: 0; padding: 0; }
      body { height: 11in;  width: 8.5in; }
      #footer { position: absolute; bottom: 0; }
    </style> 
  </head> 
  <body>
    <div id="content">
        <table>
          more divs... more content...
        </table>
        <table>
          more divs... more content...
        </table>
        ....
    </div>    
    <div id="footer"> 
      This will always print at the bottom
    </div> 
  </body> 
</html>

印刷メディアのみのスタイルを追加したことに注意してください。

<style type="text/css" media="print">
      html, body { margin: 0; padding: 0; }
      body { height: 11in;  width: 8.5in; }
      #footer { position: absolute; bottom: 0; }
</style>
于 2012-11-12T11:13:54.410 に答える