適応幅（パーセンテージ）に応じて Div の高さを調整する純粋な CSS

今日のレスポンシブ レイアウトの要件では、サイズを自動的に調整できる多くの要素で高さと幅の適応を実現できます。たとえば、img では、{width:50%;height:auto;} を通じて幅の比率に従って画像の高さを調整できます。

ただし、最もよく使用されるタグである Div は、自動調整できません (親から継承するか、px を自分で指定するか、パーセンテージを指定します。ただし、このパーセンテージは要素自体の幅ではなく、親の高さに基づいて計算されるため、Div の幅と高さの間に特定の比率を実現することはできません =-=)。

この機能 (div の高さ: 幅 = 1:1) を実現するには、さまざまなバフを通じて、いくつかの対処方法があることがわかっています。

1. divの幅と高さを直接指定し、ズームして適応性を実現します。

div{幅:50px;高さ:50px;ズーム:1.1;}

これにより、初期の等しい幅と高さの div を実現できますが、制限が大きすぎるため、合格です。

2. jsを使用してdivの幅を動的に決定し、高さを設定します。

div{幅:50%;}

window.onresize = function(){div.height(div.width);}

幅と高さを等しくする div を実現することも可能ですが、少しぎこちない感じがします。PASS!

3. 幅と高さの単位で設定する

div{width:20vw;height:20vw;/*20vw はビューポート幅の 20% です*/

ただし、多くのデバイスはこの属性をサポートしておらず、互換性が低すぎるため、PASS!

4. floatで設定

#aa{背景:#aaa;;}
#bb{背景:#ddd;;フロート:左}
#cc{背景:#eee;;フロート:右}

<div id="aa">親div
  <div id="bb">子 div</div>
  <div id="cc">子 div</div>
  <div style="clear:both">これはエラーをクリアするために使用されます</div>
</div>

親要素 aa は子要素の高さに応じて自動的に高さを変更し（子要素にアダプティブ要素を配置して）、アスペクト比が一定になるように調整できますが、面倒すぎるので PASS!

5. 最後に、究極のキラー、この機能はパディングによって実現されます

上記のソリューションを実験した結果、幅の適応はビューポートの幅に応じて調整されることがわかりました。たとえば、{width: 50%} はブラウザの表示領域の 50% を意味し、サイズ変更後に自動的に調整されます。

高さをパーセンテージで指定すると、調整するビューポートの高さが自動的に検出されますが、これは幅とは関係ありません。当然、両者は比例関係にはなれません。この考え方を念頭に置いて、ビューポートの幅に関連するプロパティを見つけることでこの問題を解決できます。

このプロパティはパディングです。パディングはビューポートの幅に応じて調整されます。偶然にも、padding-top と padding-bottom もビューポートの幅に基づいて計算されます。そのため、このプロパティを設定することで、幅と一定の比例関係を実現できます。

まず、要素の幅を親要素の 50% に指定します (親要素とは、高さと幅を持つ任意の要素です。特定の親要素を指定することはできません。そうしないと、このソリューションの汎用性に影響します)

.father{幅:100px;高さ:100px;背景:#222}

.element{幅:50%;背景:#eee;}

このとき、要素の高さを 0 に、padding-bottom: 50% に設定します。

.element{幅:50%;高さ:0;下部パディング:50%;背景:#eee;}

要素は、幅 50%、高さ 0 の正方形になります (ただし、padding-bottom の幅は 50% です)。効果は、下の図のグレーホワイトの div に示されているとおりです。

この時点で、divの高さが0の場合、要素内に要素を配置するとオーバーフローしないのかと疑問に思う人がいるかもしれません。ここで、divのコンテンツとパディングを含めて計算されるoverflow属性について言及する必要があります。

元々、div は {width: 50px; height: 50px; padding: 0} の div だったかもしれませんが、現在は {width: 50px; height: 0; padding-bottom: 50px;} の div になっています。サイズは同じままです。この div の子要素の位置を指定することにより、正常に表示することができます。

このように、親要素の father、必要な要素、子要素の datail を設定することで、どのような場合でもこの要件 (div の幅と高さの固定比率) を達成できます。

純粋な CSS を使用して、適応幅 (パーセンテージ) に応じて Div の高さを調整する方法については、これで終わりです。適応幅に応じて Div の高さを調整する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。