Home >Web Front-end >CSS Tutorial >How Can I Achieve 100% Child Element Height Within a Variable-Height Parent?
Achieving 100% Child Height in a Varying Parent
In a multi-column layout, ensuring the navigation column aligns vertically with the main content is crucial. However, without specifying the parent's height, this can prove challenging.
Solution:
Employ the flex display property on the parent element. This allows children to flex and expand vertically, occupying the parent's height.
.parent { display: flex; }
Additional Properties:
Example:
.parent { display: flex; align-items: stretch; } .child { height: 100%; width: 50%; }
Note:
The above is the detailed content of How Can I Achieve 100% Child Element Height Within a Variable-Height Parent?. For more information, please follow other related articles on the PHP Chinese website!