Within my Index.js file, I have created an Index component that includes a navbar and a landing page layout. I aim to have a showcase section taking up 40% of the width, with the remaining 60% dedicated to a react-bootstrap carousel. The Index component should occupy 100% of the screen height, and the index_body content should be centered and fill the screen's height. However, I am encountering an issue where the index_body only takes the height of its content, leaving white space below it. You can see the issue in this screenshot: https://i.sstatic.net/mtUEA.jpg. When the carousel moves to a slide with a larger image, the index_body height extends beyond 100%. This is demonstrated in this screenshot: https://i.sstatic.net/AOCSe.jpg
function Index() {
return (
<>
<nav className="navbar navbar-dark navbar-expand-sm bg-dark">
<div className="container">
<Link to={'/'} className="navbar-brand logo"><h2>XYZ</h2></Link>
<ul class="navbar-nav ml-auto">
<li><Link to={'/login'} className='btn btn-dark '>Login</Link></li>
<li><Link to={'/signup'} className='btn btn-dark' style={mystyle}>Sign Up</Link></li>
</ul>
</div>
</nav>
<div className='index_body p-4 d-flex' >
<div className="info p-2 d-flex align-items-center" style={{width: '40%'}}>
<div>
<h1 className="info_heading">Showcase section </h1>
<p className="info_description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis perferendis mollitia nobis labore quasi reiciendis laboriosam aliquid ea eos perspiciatis.</p>
<Link to={'/login'} className="btn btn-dark" style={mystyle}>Explore Now</Link>
</div>
</div>
<Carousel activeIndex={index} onSelect={handleSelect} style={{width: '60%'}}>
<Carousel.Item>
<img className="d-block w-100" src={firstSlide} alt="First slide" />
</Carousel.Item>
<Carousel.Item>
<img className="d-block w-100" src="https://images.unsplash.com/photo-1641752084801-80dc709cdf28?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=700&q=60" alt="Second slide" />
</Carousel.Item>
<Carousel.Item>
<img className="d-block w-100" src="https://images.unsplash.com/photo-1641586822453-e2e5238fa075?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Third slide" />
</Carousel.Item>
</Carousel>
</div>
</>
I have already tried:
- Setting index_body height to 100%
- Setting index_body min-height to 100%