Question

我目前正在为项目使用Bootstrap 4.1.3。

借助h-100包装器，我设法在flex-fill内用<div class="h-100">创建了多个子级。

尽管它可以在Google Chrome浏览器中正常工作，但是感觉好像我做错了什么，因为在较小的屏幕上，这些子元素的高度比其父元素高100％。

CSS或Bootstrap 4中是否有更好的方法来实现多个子元素，而这些元素在flex-fill父级内部具有100％的高度，同时又保持Bootstrap 4的响应能力？

这是我的示例代码：

html,body {
  height:100%;
}

<body>
  <!-- Added Flex -->
  <div class="d-md-flex flex-column h-100">
    <!--p>Nav Bar</p-->
    <!-- Show selection when screen is in medium range-->
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavBar" aria-controls="mainNavBar"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNavBar">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="#">Section 1</a>
        </div>
      </div>
    </nav>

    <div class="container-fluid d-flex h-100">
      <div class="row flex-fill">
        <!--Main Content-->
        <div class="col-md-8">
          <div class="row h-100">
            <div id="mainSection" class="col-md-12 d-flex flex-column flex-fill">
              <div class="h-100"><!-- <<<Mentioned Wrapper -->
                <div id="section1" class="h-100 bg-warning">
                  <!--Sample Text-->
                  <p>
                    Lorem ipsum dolor sit amet, eos ne doming equidem persequeris, vis nostro detracto oportere ne, no
                    sit
                    menandri inciderint. Per tacimates salutatus voluptaria ex. An dolor munere sea. Nam et brute
                    noluisse, per
                    modus harum nominati no.
                  </p>
                </div>
                <div id="section2" class="h-100 bg-success">
                  <!--Sample Text-->
                  <p>
                    Lorem ipsum dolor sit amet, eos ne doming equidem persequeris, vis nostro detracto oportere ne, no
                    sit
                    menandri inciderint. Per tacimates salutatus voluptaria ex. An dolor munere sea. Nam et brute
                    noluisse, per
                    modus harum nominati no.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Profile Bar-->
        <div class="col-md-4">
          <div class="h-100 position-fixed" style="border:1px solid yellowgreen;">
            <p>Hi I am Darky</p>
            <p>
              Introduction 1:

              Hinc omittam inciderint eu duo, nisl doctus no duo, oratio quidam concludaturque cu vix. Te sea
              voluptatibus delicatissimi, nec ex habeo alienum efficiendi, id quis ludus detracto sit. Has ei libris
              patrioque, habeo corpora blandit id qui. Solum alterum blandit an quo. Vel modus novum nominavi eu, sit
              partem electram ea. Sit vero temporibus ne, sea cu justo dicit accusam.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

更新的问题2018/11/18

所以我的问题是：

我不明白为什么提到的包装器<div class="h-100">可以帮助section1和section2分别达到'mainSection'高度的100％。
我是否正确使用上述包装器<div class="h-100">和flexbox？

通过Bootstrap4灵活填充具有多个h-100个孩子的父母

0 个答案: