0

私が現在取り組んでいる Web サイトは、印刷可能なドキュメントを複製することを目的としています。ヘッダー、ボディ、フッターがあります。3 つの要素はすべて CSS を使用して、それぞれの余白と高さを調整します。

フッターの高さは 0.5 インチで、ページの下部から少なくとも 0.5 インチ離れている必要がありますが、それを超えることはできません。他のワード プロセッサに基づいて、フッターが 0.5 インチより大きい場合、フッターはページ上で上に移動し、0.5 インチの境界線を維持します。

これはボディが縮小することを意味するので、大きなフッターがボディを縮小するように設定しました (私はそう思います)。これは予想される動作です。

ただし、フッターがページの下部から常に少なくとも 0.5 インチになるようにページ上の位置を調整する方法が必要です。

1 つのドキュメントの任意の数のページに対してソリューションが機能するようにしたいので、固定位置を使用できないことに注意してください。

高さが十分に小さい限り機能するデモコードを含めています。

<div style="height: 9in;
padding-left: 1in;
padding-right: 1in;
padding-top: 0.5in;
padding-bottom: 0.5in;
background-color: #eee;
margin-top: -0.08in;
margin-left: -0.08in;">
            <div style="height: 0.5in"> Nick 1 </div>
            <div style="max-height: 9in; height: 9in;">I love stuff.</div>
            <div style="min-height: 0.5in; height: 0.5in; margin-top: 0.5in;">Footer</div>
</div>
4

4 に答える 4

0

CSSスティッキーフッターの手法を調べてください。

原則はこれです：

  • コンテンツには、フッターの高さに等しい下部のパディングがあります
  • フッターは相対位置を使用します
  • フッターの上部マージンは、それ自体の（否定された）高さに等しくなります。

その結果、コンテンツのパディング上でフッターがオーバーラップします。サイズがオーバーラップと一致するため、フッターはコンテンツの終わりに「固定」されます。

于 2013-03-21T20:48:15.223 に答える
0

あなたが探していることは、少なくともフレックスボックスモデルがより広くサポートされるまでは、CSS だけで実行できるとは思いません。Chrome 24 以降を使用している場合は、http://jsfiddle.net/2late2die/bNJZG/1/で以下のコードの動作を確認できます。

.page {
  width:8in;
  height:10.5in;
  background:#fff;
  position:relative;
  margin:.5in auto;
  box-shadow:rgba(0,0,0,.2) 0 0 .1in;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  -ms-flex-flow: column;
  -ms-flex-direction: column;
  flex-flow: column;
}
.page .body {
  -webkit-flex: 1 0 auto;
  -moz-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

基本的に、ページの本文を、ヘッダーとフッターの間の垂直方向のスペース全体を占めるように伸びるフレックスボックス アイテムに設定します。ただし、ヘッダーとフッターの間に残されたスペースを超えるとオーバーフローするため、ボディの高さを自分で管理する必要があります。

于 2013-03-22T03:49:32.253 に答える
0

これは基本的にスティッキー フッターです。

CSS

.wrap { 
  min-height:100%;
  margin-bottom: -.4in; /* same as footer */
}
.push, #footer {
  height:.4in;
}

HTML

<div class="wrap">
 <div></div>
 <div></div>
 <div class="push"></div>
</div>
<div id="footer">
于 2013-03-21T21:00:08.727 に答える