CSS - 高さ100％が100％を超えていますか？

Question

私はクライアントのページを作者によって削除されました（ヘブライ語ですが、それは無関係です）。
フッター（灰色の背景）にいくつかのCSS問題があります - そのボックス内のコンテンツに合わせて灰色の背景が欲しいです - リストが大きくなると背景のdivの高さが上がり、リストが縮小すれば背景をします。私はこれが100％の高さで達成できることを知っています、そして私はコンセプトの基礎を知っています。親コンテナも100％の高さに設定する必要があることを理解しています。そのため、背景が伸びます。
私がリンクしているページのフッタと、それに入っている2つのコンテナを見れば、はるかに遠くに伸びています（Web Developer Toolbarを使用すると各コンテナの高さを見ることができます）。また、コンテナはコンテンツに応じて伸びる必要があるにもかかわらず、異なる高さに設定されているようです。
私は高さ、最小高さ、クリアと位置設定をどこにでも置こうとしました - 私はちょうどそれがうまく動作するようにすることはできません。
私は全体的に "CSS 100％の高さ"の質問がよくあることを知っています。私を信じて、私は読んで、この同じ問題を抱えている人を探しました - しかし、私は何も見つかりませんでした。

Answer 1

パディング、マージン、およびボーダーは高さと幅でカウントされないため、各側に10ピクセルのパディングがある要素の100％の高さまたは幅は、実際には100％と20ピクセルを占めます。余白や枠線を使用している場合はさらに追加してください。

CSS box-sizing:border-box;プロパティを使用すると、ボーダーとパディングが考慮されるようにボックスモデルを切り替えることができます（マージンはボックスの外に残っているため、100％を使用している場合は、マージンは使用しないでください）。

これにより、効果的にボックスモデルが古いQuirksモードボックスモデルと同じように機能します。

ここbox-sizing機能の詳細をご覧ください：http://css-tricks.com/box-sizing/

box-sizingはかなり良いクロスブラウザをサポートしているが、それはIE7で働く以下、および一部のブラウザのベンダープレフィックスを必要としないことに注意してください。何のリンクがないので、http://caniuse.com/#search=box-sizing

Answer 2

これは野生の推測です：

は、ここでは、ブラウザのサポートの詳細を参照してください。 divにパディングがありますか？ Paddingはdivの高さに常に追加され、その高さも100％です。

Answer 3

自分自身にはしないでください... ただクリアしてください。

<ul>を左または右に浮かし、親divの最後の直前に<div style='clear:both'>を追加します。

Behatzlacha、ahi。