要让 CSS 父元素和子元素的高度相同,可以使用如下方法:
1.使用flex布局
可以给父元素设置
display: flex
属性,然后再设置子元素的高度为 100%,即可实现子元素和父元素高度相同。代码如下:
<div class="parent">
<div class="child">子元素</div>
</div>
.parent {
display: flex;
.child {
height: 100%;
2.使用position属性
可以将父元素设置为相对定位(position: relative
),然后将子元素设置为绝对定位(position: absolute
)并且将 top
、right
、bottom
、left
属性都设置为0。这样子元素就会相对于父元素进行定位,并且高度也会自动匹配父元素的高度。代码如下:
<div class="parent">
<div class="child">子元素</div>
</div>
.parent {
position: relative;
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
以上两种方法都可以实现父元素和子元素高度相同的效果,您可以根据具体需求选择使用其中的一种方法。