0

2 つのセクションを持つコンテナーを作成しようとしています。上部のセクションは、コンテナーの垂直方向の高さの 100% からスティッキー フッターの高さを引いたものを占めるスクロール div になります。スティッキー フッターの高さをハードコードすることはできません (2 つの異なる高さの 2 つのモードで動作するため)。可能であればcssのみを使用し、jsを使用しないことをお勧めします。

HTML

<div class="container">
   <div class="scrollArea">
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
   </div>
   <div class="footer">
      <!-- the contents of the footer will determine the height needed -->
   </div>
</div>

CSS

.container {
    position: relative;
    height: 100%;
    width: 100%;
}

.scrollArea {
    position: absolute;
    top: 0px;
    bottom [height of sticky footer]; left: 0px;
    right: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.footer {
    position: absolute;
    bottom: 0px;
    height: [height of sticky footer];
    left: 0px;
    right: 0px;
}
4

1 に答える 1

0

すべてに使用したくないposition: absolute;..絶対要素には技術的に高さがないため（他の要素の観点から）、スタイルを設定するのが非常に難しくなります。下、左、上、右すべて 0 を使用する「ストレッチ手法」を使用すると、さらに混乱します。

あなたの質問は、高さがどのように設定されるかという点でも少し混乱しています..javascriptを介して設定されますか? メディアクエリを通じて？いずれかの場合は、スクロール領域の高さを同じ方法で簡単に設定でき、それらを連動して変更できます。

何らかの理由で、この 1 つの要素の高さだけを設定する必要がある場合は、css テーブル表示プロパティにスクロール領域の新しい高さを計算させることができます。これには、コンテナーを として設定し、スクロール領域のdisplay: table;周りに別のラッパーを追加します。 . そのラッパーとフッターを に設定すると、display: table-row;それらがレイアウトされます。

これをチェックして、私が何を意味するかを確認してください。

http://jsfiddle.net/6gprU/3/

あなたのコードサンプルは、何らかの形で高さが設定されることを示唆しています..ただし、そうでない場合、高さを絶対に設定することはできません（フッターに入ったコンテンツが動的でサイズが予測できない場合に当てはまります）それからあなたはこれをますます困難にしています。この場合、コンテナ全体の高さを特定のサイズに保つ必要があるかどうかによって異なります。もしそうなら、そうなると思いますが、変数が多すぎて純粋な css では実行できないため、レイアウトを再考する必要があるかもしれません。

それに加えて、これを本当に簡単にする別のオプションがあります。CSS には次の機能がありますcalc()。

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

この機能を使用すると、JavaScript で行うのと同じように、css で計算を実行できます。また、何かに関連する高さを動的に設定できます。ただし、ブラウザのサポートが少し限られているため、これを最後に置きます。IE 8 以下では動作しません。

このサイトをチェックして、どこで機能するかを確認し、これが有効なオプションであるかどうかを判断してください.

http://caniuse.com/calc

于 2013-10-04T20:57:06.507 に答える