プロジェクトを書いているときに、データがないのに突然スクロールバーが表示されたのですが、あるアイデアを思いついたのですが、物事は単純ではないことに気付きました。.
課題トラッカー:
子ボックスは親ボックスの高さをサポートしていません。
構造：
親ボックス: 
子ボックス: 
原因：
通常、高さ、オーバーフローなど、内層の高さを設定しますが、フローティングはクリアされません
解決：
1. 解決策 1: (ここでこの方法を使用すると、実際にはアダプティブ レイアウトが使用されます)
外側の div スタイルに 2 つのタグ (少なくても) を追加します clear:both; overflow:auto;
2. オプション 2
ステップ 1) 内部の子要素にフローティングを追加します。
ステップ 2) 外側の親要素に padding-top を追加します。
ステップ 3) overflow:hidden を外側の親要素に追加します。
次に、CSS3 の 4 つの適応キーワードについて説明します。
序文：
一般に、適応には 2 種類あります。空き領域を埋めることと、コンテンツ サイズに縮小することです。CSS3 では、これら 2 つのケースをそれぞれ「fill-availablelabel」と「fit-content」として定義しています。これに加えて、よりきめ細かい「min-content」と「max-content」が追加されました。これら 4 つのキーワードを使用して、幅と高さの属性を設定できます。
(注: IE はサポートしていません。Webkit コアを搭載したブラウザーでは、-webkit- プレフィックスを追加する必要があります)
1. fill-available: 子要素に設定
文字通り, fill-available は, width と height を含む利用可能なスペースを埋めること(利用可能なスペースを最大限に活用するため) . 実際, その機能は私たちがよく使う 100% に相当します. width: fill-available と同等です。これは、要素の親要素のサイズによって決定される値である外部サイズです. たとえば、親要素の幅が 100px で、その子要素が width: fill-available に設定されている場合、親要素は同じで、どちらも 100px であるため、fill-available は実際には外部サイズによって決定されるサイズです。
fill-available キーワード値の値は、要素の 100% 自動入力機能をブロック レベル要素だけでなく、他の要素にも適用できることです。
<head>
...
<style>
/* 父元素的样式 */
div.father{
height: 300px;
background-color: #f90;/* 黄色 */
}
/* 子元素的样式 */
div.child{
height: -webkit-fill-available;/* 子元素高度设为fill-available */
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>用途:フィルアベイラブルで簡単に等高レイアウトが実現できます。
<style>
.inner{
width:100px;
height:-webkit-fill-available;
margin:0 10px;
display: inline-block;
vertical-align: middle;
background-color: pink;
}
</style>
<div style="height: 100px;">
<div class="inner">HTML</div>
<div class="inner">CSS</div>
<div class="inner">JS<br>jQyery<br>Vue</div>
</div>2.fit-content: 親要素に設定
意味的に言えば、誰もが思うように アダプティブコンテンツの属性値 ですが、実は定義どおり、コンテンツに適応することなので、この属性値は難しくありません。
その効果は display: inline-block インライン要素を直接設定することと同じですが、これに限定されるものではありません.たとえば、フレックス レイアウトでは使用できますが、純粋なインライン要素では使用できません.
<head>
...
<style>
/* 父元素的样式 */
div.father{
height: fit-content;/* 给父元素施加fit-content */
background-color: #f90;/* 黄色 */
}
/* 子元素的样式 */
div.child{
height: 100px;
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child"> </div>
</div>
</body>
width:fit-content は、元のブロックの水平状態を維持しながら要素の縮小効果を実現できるため、margin:auto を直接使用して、要素の内側への自己適応のセンタリング効果を実現できます。
アプリケーション: ブロック要素の動的な幅を実現して、大きなボックスが大きなボックスを超えないようにしてから、margin:auto; を使用して、水平方向と垂直方向のセンタリングを実現します~
<style>
div{
background-color: pink;
width:-webkit-fit-content;
margin:auto;
}
</style>
<div>小火柴的蓝色理想</div>3. max-content: 親要素に設定
max-content を文字通り理解することは、最大の contentを使用することです . 実際には、それだけでは十分ではありません. max-content の実際の定義は:子要素の中で最大のスペースサイズを持つ要素のサイズです.
max-content: 簡単に理解するには、コンテナに十分な幅と高さがあると仮定します。幅に適用される場合、最大の内部要素幅の値を持つ要素の幅が、最終的なコンテナーの幅として使用されます。テキストが存在する場合は、テキストがラップされていないことと同等です。このときの占有幅は、max-content で示されるサイズになります。
<head>
<style>
div.father{
height: 300px;
border: 1px solid #aaa;
width: max-content;/* 给父元素施加max-content值 */
}
div.child1{
height: 100px;
background-color: #b22222;/* 红色 */
}
div.child2{
color: #fff;/* 白色 */
font-weight: bold;
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2">
正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测 试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试
</div>
</div>
</div>
</body>
4.min-content: 親要素に設定
min-content は、内側の要素の幅が小さい方ではなく、内側の要素の最小幅が最大の要素の幅が、最終的なコンテナーの幅として使用されることを意味します。
画像など、固定幅と固定高さを持つ要素の場合、幅の最小値は画像の幅になります。テキスト要素の場合、すべてが中国語の場合、幅の最小値は中国語の幅の値になります。デフォルトは英語であるため、単語は折り返されないため、最小幅は内側の英単語の幅になる場合があります。
まとめ: width:min-content の最終的な幅は、 pictures と text の幅の最小値のうち大きい方になります。
<style>
.outer{
width: -webkit-min-content;
}
.child1{
height: 10px;
width: 100px;
background: lightgreen;
}
</style>
<div class="outer">
<div class="child1"></div>
<div>小火柴的蓝色理想, peace and love~</div>
</div>参考：
CSS3 の 4 つの適応キーワード - fill-available、max-content、min-content、fit-content - M Beatles M - 博客园