高さが可変の親要素内で子要素の高さを 100% にするにはどうすればよいですか?

さまざまな親で 100% の子の高さを達成する

複数列レイアウトで、ナビゲーション列がメイン コンテンツと垂直方向に揃うようにする重要です。ただし、親の高さを指定しないと、これは困難になる可能性があります。

解決策:

親要素で flex display プロパティを使用します。これにより、子は親の高さを占めて垂直方向に伸縮したり拡張したりできます。

.parent {
  display: flex;
}

追加プロパティ:

• align-items:ストレッチ;子要素が親内で垂直方向に伸びるように設定します。
• flex-direction: column;子要素を垂直方向に配置します (デフォルト値)。

例:

.parent {
  display: flex;
  align-items: stretch;
}

.child {
  height: 100%;
  width: 50%;
}

注:

• ブラウザ間の互換性のためのプレフィックスは次のとおりです。推奨します。
• 適切な垂直方向の配置には、親要素にある程度の高さを確保することが重要です。

以上が高さが可変の親要素内で子要素の高さを 100% にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。