ページレベルのスクロールを維持しながら、展開された子に合わせて親 Div のサイズを動的に変更するにはどうすればよいですか?

展開された子に合わせて親コンテナのサイズを変更する

目的は、親

のサイズを動的に変更することです。ネストされた子要素の高さと一致します。このシナリオは、親要素が静的なままで子要素が垂直方向に拡大する場合に特に便利です。

1 つの方法は、親のオーバーフロー プロパティを auto に設定することです。これにより、コンテンツがオーバーフローし、必要に応じて親内に垂直スクロールバーが作成されるようになります。ただし、この方法には、子コンテンツがブラウザ ウィンドウの幅を超えて拡張され、ページ自体ではなく親に水平スクロールバーが表示される場合に欠点があります。

この問題を克服し、スクロールバーがページ レベルで表示されるようにするには、別のソリューションを実装できます。親の表示プロパティを table に設定し、子の表示プロパティを table-row に設定すると、ページ レベルでの水平スクロールに対応しながら、子の高さを含むように親のサイズが変更されます。

/ 親
/
display: table;

overflow: auto;

/ Children
/
display: table-row;

このソリューションは、目的の垂直方向の拡張を維持しながら、水平スクロールバーの配置の問題

以上がページレベルのスクロールを維持しながら、展開された子に合わせて親 Div のサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。