javascript - 无法弄清为什么Height：100％； 不管用(Can't figure out why Height:100%; is not working)

Question

I am currently creating a section of my website for mobile.

(我目前正在网站的一部分中创建移动版。)

I am trying to make a section that is 100vh (which is working fine) and has two components inside of it, taking 50% each of the 100vh div by setting their height to 50% (which is working fine).

(我正在尝试制作一个100vh的部分（工作正常）并在其中包含两个组件，将其高度设置为50％（正常工作），从而将100vh div的每个部分都占了50％。)

Inside the second child div is a slideshow component.

(在第二个子div内是一个幻灯片组件。)

The slide show component's height is set to 100% and it is currently working fine taking up the full height of its parent.

(幻灯片放映组件的高度设置为100％，目前可以正常工作，并且占据了父组件的全部高度。)

However inside this slide show component is a div that has a background image.

(但是，此幻灯片放映组件内部是具有背景图像的div。)

I was expecting that setting this div to 100% aswell would make it take up 100% of the slideshow components height.... But it doesn't.

(我期望将div设置为100％也会使其占据幻灯片组件高度的100％。)

The only way I can change the height of the div inside the slideshow component is using px sizing.

(我可以更改幻灯片组件内部div高度的唯一方法是使用px大小。)

I don't understand why this is happening.

(我不明白为什么会这样。)

code below-

(下面的代码)

App.js

(App.js)

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

App.css

(App.css)

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

SlideShow.js

(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-

(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;

}

  ask by Venom4992 translate from so

Answer 1

等待大神答复