反应引导列在 ipad 和 ipad pro 上留下空白

Question

我正在使用 react-bootstrap 构建一个网站，而 Ipad 和 Ipad pro 在我的专栏底部留下了一个空白区域。我附上了一个截图来显示这个问题。当我处于 Ipad 模式时，我不确定是什么导致了底部的空白。所有其他设备都很好。 这是我的组件和 CSS：

  return (
    <Container fluid  className="about-us">
      <Row className="row row-about">
            <Col lg={6} className="text">
            <h1>WE ARE TECHON</h1>
            <h2>What we do</h2>
            <p>
              By providing user-focused digital solutions
              that intersect technology and innovation,
              we assisit start-ups and SMME's to have 
              the edge and take full advantage of the 
              digital age. Solving problems is our philosophy;
              motivationg us to use technology as a 
              tool to innovate and improve lives.
            </p>
            <h2>Why we do it</h2>
            <p>
             "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
             sed do eiusmod tempor incididunt ut labore et dolore magna
             aliqua. Ut enim ad minim veniam, quis nostrud exercitation
             ullamco laboris nisi ut aliquip ex ea commodo consequat.
             Duis aute irure dolor in reprehenderit in voluptate velit.
            </p>
        </Col>
        <Col lg={6} className="image">
            <Image className="about-img" src={require('../techOn.png')} style={{height:"100%", width: "100%"}} />
            </Col>
      </Row>
    </Container>
  );
}


.custom-nav {
  background-color: #11212b;
}
.custom-link {
  font-size: 20px;
  color: #12ffef !important;
  margin-left: 30px;
  text-decoration: none;
  text-align: right !important;
}
@media only screen and (max-width: 568px) {
  .custom-link {
    font-size: 15px;
    margin-left: 15px;
  }

  .nav {
    width: 110%;
  }
  .row {
    display: flex;
    flex-direction: column-reverse;
 }
 .story, .image {
    margin-top: 0;
    padding-top: 0;
 }
 .text {
    margin-left: 5px !important;
    font-size: 15px;
    text-align: left !important;
    margin-top: 0;
    padding-top: 0;
 }

}
.text {
  background-image: url("./techOn.png");
  color: rgb(195, 255, 249);
  margin: 20px 0px 0px 10px;
  text-align: justify;

}

.row-about {
    background-image: url("./techOn.png");
}

.row {
    display: flex;
}

@media only screen  and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait) {
       .custom-link {
    font-size: 15px;
    margin-left: 15px;
  }

  .nav {
    width: 100%;
  }
  .row {
    display: flex;
    flex-direction: column-reverse;
 }
  }

Answer 1

您没有将背景样式应用于“about-us”类是否有原因？可能会解决它

您也可以在 row-about 上使用 height=100vh