Question

我当前正在为移动设备创建网站的一部分。我正在尝试制作一个100vh的部分（工作正常）并在其中包含两个组件，通过将其高度设置为50％（正常工作），将100vh div中的每个部分占50％。

第二个子div的内部是一个幻灯片组件。幻灯片放映组件的高度设置为100％，目前可以正常工作，并且占据了父组件的全部高度。但是，此幻灯片放映组件内部是具有背景图像的div。我期望将div设置为100％也会使其占据幻灯片组件高度的100％。我可以更改幻灯片组件内部div高度的唯一方法是使用px大小。我不明白为什么会这样。

下面的代码-

App.js

<div className="sh-box">
    <LargeImage />
    <SlideShow className="h-100" />
</div>

App.css

.sh-box{
    height: 100vh;
    width: 100vw;
}

SlideShow.js

<div className="slide-container-boxed">
    <Slide {...properties} className="h-100">
        {slideImages.map((each, index) => (
        <div key={index} className="each-slide-boxed">
            <div style={{ backgroundImage: `url(${each})` }}>
                <span>Slide {index + 1}</span>
            </div>
        </div>
        ))}
    </Slide>
</div>

SlideShow.css-

.slide-container-boxed {
    width: 90%;
    padding: 0;
    height: 50%;
    margin-left: auto;
    margin-right:auto;
    border-style: solid;
    border-width: 2px;
    border-color:green;
}
.each-slide-boxed{
    height:100%;
}
.each-slide-boxed > div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.each-slide-boxed span {

    padding: 1px;
    font-size: 10px;
    text-align: center;

}

无法弄清为什么Height：100％；不起作用

0 个答案: