我在html中使用div，但是当我将高度指定为100%时，它不会采用其父容器的完整高度。代码如下所示。
<main>
<h1 class="first-text"></h1>
<h2 class="first-text"></h2>
<div class="pictures">
<div class="arrows">
<i class="fas fa-arrow-right arrow-right"></i>
<i class="fas fa-arrow-left arrow-left"></i>
</div>
<img src="" width="400" alt="" />
<img src="" width="400" alt="" />
</div>
</main>
问题是箭头div 没有得到图片div 高度的 100%，这里是 css。
.pictures{
width: fit-content;
margin: 0px;
padding: 0px;
margin: auto;
animation: changeImage 1s;
}
.arrows{
background: blue;
display: flex;
height: 100%;
align-items: center;
width: 100%;
position: relative;
color: white;
}
试试这个。 我做了100%main, body, html，然后也做了100%.pictures。 你的.arrows得到了100%的父级，但父级却崩溃了。
<!DOCTYPE html>
<html>
<head>
<style>
main, body, html { height: 100%; }
.pictures{
width: fit-content;
height: 100%;
margin: 0px;
padding: 0px;
margin: auto;
animation: changeImage 1s;
}
.arrows{
background: blue;
display: flex;
height: 100%;
align-items: center;
width: 100%;
position: relative;
color: white;
}
</style>
</head>
<body>
<main>
<h1 class="first-text"></h1>
<h2 class="first-text"></h2>
<div class="pictures">
<div class="arrows">
<i class="fas fa-arrow-right arrow-right"></i>
<i class="fas fa-arrow-left arrow-left"></i>
</div>
<img src="" width="400" alt="" />
<img src="" width="400" alt="" />
</div>
</main>
</body>
</html>