0

私はあなたと共有する素晴らしいシークレットを手に入れました。非常に単純なことをしようとしているときにそれを見つけました-少なくとも私はそれが単純だと思いました。

舞台

任意の数の子を含む固定の高さの値を持つ親要素。2 つの子から始めて、div を例に挙げてみましょう。

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

目標

子の高さと垂直マージンを親の高さと正確に一致するようにスタイル設定し、合計の高さを子要素間で均等に分割します。ソリューションは、任意の数の子要素に対して再利用できる必要があります。もちろん、何らかの計算が必要になる場合があります。

問題

パーセンテージ ベースの高さとマージンを使用しても機能しません。次のような解決策...

.parent {
    width: 5em;   /* some fixed width */
    height: 10em; /* some fixed height */
}
.child {
    width: 100%;
    margin-top: 4%;
    height: 44%;  /* let's render 3 gaps of 4% each (on top, middle and bottom) */
}

...垂直マージンとパディングも解決された値は、期待どおりに親の高さではなく、親の幅に基づいているため、期待どおりにレンダリングできません。この jsfiddleは、次のテストでこの動作を示しています。

テスト 1

margin-top と margin-bottom を設定します。子供の身長は100% - @margin-top - @margin-bottom

ケースA

親の高さが幅より高くなっています。上記の問題により、ブラウザーは親の下部にギャップをレンダリングします。

ケースB

親の高さはその幅と同じです。親の幅が親の高さと等しく、マージンが正しく解決されるため、ブラウザーは期待どおりにレンダリングされます。

@parent-width = @parent-height
@base = @parent-width

ケースC

親の高さが幅より低くなっています。前述の問題により、2 番目の子はクリップされます。

テスト 2

このテスト ケースは、テスト 1 がマージンで行うパディング動作を示しています。

テスト 3

子の身長が親の身長から解決されることを示します。マージンやパディングを入れようとしない場合、ブラウザーはすべてのケースを期待どおりにレンダリングします。

テスト 4

このテストは、2 番目の質問の答えを調べたい場合に役立つことを目的としています。以下を参照してください。

質問

  1. 垂直方向の高さとパディングが、親の高さではなく親の幅に基づいているのはなぜですか? w3c仕様については何も見つかりませんでした。
  2. 望ましい目標を達成するためのより良い解決策は何ですか?
4

2 に答える 2

1

興味深い...しかし、問題は垂直方向の高さではないと思います.それらはすべて私のブラウザに正しく表示されました(高さは常に親の高さに比例していました).パディングとマージンは常に親の幅を測定します.これを見つけました：

どの場合でも % (パーセンテージ) は有効な値ですが、注意して使用する必要があります。このような値は、親要素の幅の比率として計算されます。

http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding

良いキャッチ、私は知りませんでした:)

于 2013-05-01T06:05:32.863 に答える
1

今日、私は同じ問題に遭遇し、新しい相対単位vh (CSS 3) がこの場合に非常に役立つことを発見しました: パーセントのように機能しますが、ビューポートの高さに対して相対的です (相対的な幅にはvwを使用します)。親ではなくビューポートとの相対性が問題にならない場合、これは純粋な CSS ソリューションです。

于 2013-10-15T21:24:37.700 に答える