0

次の jsFiddle を検討してください - http://jsfiddle.net/mark69_fnd/hwCuB/ (質問の本文の後にコードを見つけることができます)。

これは、古典的なヘッダー、コンテンツ、フッターの HTML レイアウトの簡単な例です。次の点に注意してください。

  1. コンテンツがフッターと重なることはありません。ウィンドウのサイズを変更すると、コンテンツがフッターの上に移動するのではなく、最終的に垂直スクロールバーが作成されます。
  2. 余分なスクロールバーはありません。
  3. フッターを除いて、絶対的な高さはありません。フッターは 2em 以下であると見なされます。
  4. コンテンツの高さが、ヘッダーとフッターの間の使用可能な高さよりも低くなっています。

最初の 3 つのプロパティを保持したいのですが、最後のプロパティを変更して、コンテンツの高さがヘッダーとフッターの間の高さ全体になるようにします。そして、JavaScriptに頼らずにそうしたいと思います。

もしそうなら、どうすればいいですか？

編集

指定された html と css は単なる例です。最終結果が私の質問の条件を満たす限り、自由に変更してください。

EDIT2

どうやら、コンテンツで何を達成したいのか、あまり明確ではありません。これが私が今持っているものです： ここに画像の説明を入力

コンテンツが、ヘッダーとフッターの間で使用可能な高さ全体に拡張されていないことに注意してください。

私が求めているのはこれです： ここに画像の説明を入力

(mspaintで編集、本当にどうすればいいのかわかりません)

EDIT3

3 番目の条件に except 句を追加しました。

ただし、フッターは 2em を超えないと想定される場合があります。

HTML:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
 <div class="header">
     Header goes here.
  </div>

  <div class="content">
    <div class="innerWrapper">
      Content goes here.
      </div>
  </div>

  <div class="footer">
    <div class="status">
       Footer goes here.
    <div>
  </div>
</div>
</body>
</html>​

CSS:

html, body {
    height: 100%;
    width: 100%;
}

.container {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto;
    height: auto;
    min-height: 100%;
    background-color: #ddd;
}

.content {
    padding: 0em 0em 2em; /* bottom padding for footer */
    background-color: #bbb;
}

.footer {
    position: absolute;
    width: 100%;
    bottom: 0; /* stick to bottom */
}

.status, .header {
    background-color: #999;
    border: solid 1px #000000;
}

</p>

4

1 に答える 1

1

これを行うにはいくつかの方法があるかもしれませんが、現時点で考えられる唯一の方法は、ヘッダーとフッターの高さを設定/知ることです。

これはhttp://jsfiddle.net/fLnkf/を使用したものですdisplay:table

要件で html の変更または CSS3 の使用が許可されているかどうかに応じて、他の解決策がある場合があります。

お役に立てれば！

于 2012-10-25T19:26:54.990 に答える