1

親要素があり、親内の要素の高さを設定したいと思います。例えば：

<div id="parent">
    <p id="child"></p>
</div>

これで、「子」の高さを設定するには、「親」にも高さの値を設定する必要があることがわかりました。そうしないと、「子」だけに高さの値を設定しても効果はありません。

#parent { height: 200px; }
#child { height: 75%; }

これにより、「子」の高さが200pxの75％に設定されます。「親」の高さを削除すると、「子」の高さは設定されません。

さて、私が見つけたのは、高さを設定する代わりに、「親」の位置を絶対に設定すると、高さを設定せずに逃げることができ、「子」の高さの値は引き続き機能するということです。

#parent { position: absolute; top: 0; bottom: 0; }
#child { height: 75%; }

私が知りたいのは、これが標準的な動作なのか、それとも偶然に機能するものなのかということです。また、それが標準である場合、これは、要素に（位置を設定することによって）レイアウトを与えることで、暗黙的に高さの値を与えることを意味しますか？

4

2 に答える 2

5

基本的な考え方は次のとおりです。絶対位置の要素の場合、反対側のオフセット（たとえばleft、およびright、またはtopおよびbottom）をゼロに設定すると、要素はそれぞれそれを含むブロックの幅または高さまで伸びます。

これは一般的に使用されるトリックであるだけでなく、標準的な動作でもあります。残酷な詳細はここに仕様にあります。重要なのはこの方程式です。

絶対位置の要素の場合、垂直方向の寸法の使用値は次の制約を満たす必要があります。

'top' +'margin-top' +'border-top-width' +'padding-top' +'height' +'padding-bottom' +'border-bottom-width' +'margin-bottom' +'bottom '=ブロックを含む高さ

（これは高さを計算するためのものです。幅を計算するための対応する式もあります。これはここにあります。）

したがって、他のすべての値のデフォルトを想定すると、これは

0 + 0 + 0 + 0+'高さ'+0 + 0 + 0 +0=ブロックを含む高さ

祖先がすべ​​て静的である絶対位置の要素の包含ブロックは、常にビューポート（または最初の包含ブロック）であり、通常、ブラウザーの表示領域（またはjsFiddleのResults iframe）と同じ高さです。これにより、今説明した効果が作成されます。

親要素に明示的な高さを指定しなかったため、これにより、子要素の高さをパーセンテージで計算するための暗黙的な高さが得られます。

パーセンテージは、生成されたボックスを含むブロックの高さを基準にして計算されます。

実際、ゼロ以外の値に設定したり、ゼロ以外の値に設定topしたりbottomしても、ボックスは上記の式に従ってスケーリングされます。

height「生成されたボックスを含むブロックの高さ」は、そのブロックの指定または計算された値ではなく、使用された値、つまり計算されたときの高さを画面に表示することにも注意してください。これは、親要素を設定せずに逃げることができる理由についての混乱の原因である可能性がありますがheight、ブラウザは、暗黙の高さに基づいて子要素の高さを計算する方法をまだ知っています。

于 2012-10-26T07:50:52.223 に答える
0

もちろんはい。これは標準的な動作です。

要素にtop: 0;andbottom: 0;を設定する場合は常に、を親の値に設定することを意味します。たとえば、との要素を考えてみましょう。との子要素がある場合、子要素も次のようになります。absoluteheightheightrelativeheight: 400px;absolutetop: 0;bottom: 0;height: 400px;

<div style='position: relative;height: 400px'>
    <div style='position: absolute;bottom: 0;top:0;'>
        ...
    </div>
</div>
于 2012-10-26T07:47:39.937 に答える