当我使用 h-100 class 时，内容在容器外（在移动设备上）中断

Question

某些 bootstrap 4.0 有问题。我正在尝试使用 h-100 以便背景延伸到用户屏幕的底部。

我一直在摆弄 clearfix、fluid-containers 等来让它工作，但没有运气。
问题是当用户在移动设备上访问该页面时，轮播从容器中跳出并覆盖在我的页脚上，使它看起来非常糟糕。

只有在我使用 h-100 时才会出现这种情况，删除它没有任何问题，但我希望能够使用 h-100 或等效的方法而不是添加更多的变通方法页面内容。

<div class="text-white bg-secondary d-flex p-3 h-100">
    <div class="container-fluid">
      <div class="row">
        <div class="align-self-center text-center p-3 col-md-6">
          <h1 class="mb-4" style="font-size:325%;">Browse my work</h1>
          <p class="mb-4" style="font-size:135%;">I have done work with a non-profit in the past where I developed several of the main pages that are currently being used by the company. It also includes some past projects and mockups. To checkout the work with the nonprofit click the button
            below!</p>

          <a class="btn btn-outline-light btn-lg" href="https://community-alert.org/aboutUs.html" target="_blank">View my non-proft work! </a>
        </div>

        <div class="align-self-center col-md-6 p-0">
          <div data-ride="carousel" id="myCarousel" class="carousel slide w-100 d-flex">

            <!-- Indicators -->
            <div class="carousel-inner" role="listbox">

              <div class="carousel-item active">
                <img src="images/portfolio4.png" atl="first slide" class="d-block w-100"> </div>

              <div class="carousel-item">
                <img class="d-block w-100" src="images/portfolio5.png" data-holder-rendered="true"> </div>

              <div class="carousel-item">
                <img class="d-block w-100" src="images/portfolio8.png" data-holder-rendered="true"> </div>

            </div>

            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
              <span class="sr-only">Previous</span>
            </a>

            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon"></span>
              <span class="sr-only">Next</span>
            </a>

          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

这似乎是一个棘手的问题，因为我问过的每个人都不确定该怎么做。我刚刚与一位软件工程专业人士交谈，他向我展示了该问题的一种解决方案，因此我将其发布以帮助其他寻求答案的人。

回答：基本上，无论何时在移动设备上查看页面，使用 h-100 都会破坏容器，可能严格来说 iOS 因为他们无法正确地手动渲染 h-100。然而，我需要 h-100 的原因只是为了在大型桌面上填充背景，因为页面上没有足够的内容让页脚在加载时位于屏幕下方。注意：我只需要在桌面上使用 h-100，所以我们所做的就是添加一个内部媒体查询来获取屏幕宽度。如果屏幕足够小，我们就不需要 h-100。

这是媒体查询代码：

<style>
  @media only screen and (min-width: 900px)
  {
    .myh-100
    {
      height: 100%;
    }
  }
</style>

PS - 样式标签在那里是因为我在文档的头部包含了这个查询。

当我使用 h-100 class 时，内容在容器外（在移动设备上）中断

Content breaking outside container (on mobile) when I use h-100 class

html

css

containers

grid-layout

bootstrap-4