CSS の高さ 100% に関する小さな問題_html/css_WEB-ITnose

<div style="overflow:hidden;">    <div style="height:50px;float:left;width:100px;background:#CCC;"></div>    <div style="height:100%;float:left;width:100px;background:#808080;"></div></div>

2 番目の div の高さを自動的に 100% にできないのはなぜですか?
並列 div の高さをそれらのいずれかの高さにするにはどうすればよいですか

ディスカッションへの返信 (解決策)

初心者、どうすれば実現できますか?

初心者、どうすれば実装できますか? 🎜>

意味が分からないようです

<div style="overflow:hidden;position:相対;">

<div style="height: 100px ;float :left;width:100px;background:#CCC;"></div>

<div style="height: 100%;width:100px;left: 100px;background:#808080;position : 絶対 ;"></div>

</div>


<div style="overflow:hidden;position:相対;">

< div スタイル ="高さ: 100%;浮動小数点:左;幅:100px;背景:#CCC;"></div>

<div スタイル="高さ: 100%;幅:100px;左: 100px; ;background :#808080;position:Absolute;"></div>

</div>

非常に良いですが、これには問題があります。つまり、幅が適切ではありません。修正されている場合、これは不明です

高さを調整できない場合は、最小の高さを使用して最初の DIV の高さを設定し、次に 2 番目の DIV の高さを設定してみてください。最初の DIV を 2 番目の DIV の上に浮かせたい場合は、絶対配置を使用する必要があると思います。目的があまり明確ではなく、よくわかりません
<div style="overflow:hidden;"> ;"></div>

<div style= "高さ:100%;幅:100px;背景:#808080;"></div>

</div>

<div style="overflow:hidden;">
<div style="height:50px;width:100px;background:#CCC;display:table-cell;"</div>
<div style="height:100%; width:100px;background:#808080;display:table-cell;"></div>

</div>

display:table-cell; を追加、float:left; を削除

style="height:100%; float:left;width:100%; 同じになるようにしてください

これを追加してみてください Like:

html,body{ height:100%;}

投稿に時間がかかってしまい申し訳ありません

<div style="overflow:hidden;"> ;

<div style="height:50px;width: 100px;background:#CCC;display: table-cell;"></div>
<div style="height:100% ;width:100px;background:#808080;display: table-cell; "></div>
</div>

display: table-cell; を追加し、float:left; を削除しました

これで確かに効果が得られます。ありがとうございます