Bootstrap 4-全高抽屉

时间：2018-07-18 17:49:02

标签： css bootstrap-4

我正在使用使用Bootstrap 4的应用程序。此外，我正在使用material design framework。我需要这个应用程序占用整个屏幕并使用框架中的抽屉。我可以使用Flexbox成功使该应用程序占据整个屏幕。但是，我似乎无法让抽屉占据所有可用的高度。您可以在this Fiddle中看到问题。 Fiddle中的代码如下：

<div id="app" class="d-flex flex-column h-100">
  <nav class="navbar sticky-top banner">
    <a class="navbar-brand" href="#">My App</a>
  </nav>

  <div class="d-flex flex-column flex-grow">
    <div class="h-100 flex-grow">
      <div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
        <div id="appDrawer" class="bmd-layout-drawer bg-faded">
          <div class="container">
            <header>Hello</header>
            <p>
              This is a longer block of information text.
              Regardless of how long this block of text is,
              the drawer should extend all the to the footer.
            </p>
          </div>
        </div>

        <main class="bmd-layout-content">
          <div class="container">
            <h1>
            Hello
            </h1>

                <button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>

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


    <footer>
      <p>Thank you for visiting!</p>
    </footer>
</div>

如何使抽屉占据nav和footer区域之间的整个高度？

谢谢

4 个答案:

答案 0 :(得分：2)

一种方法是使包含.bmd-layout-container的元素通过flex-direction：列成为flex父级，然后将生成的.bmd-layout-canvas类设置为flex-grow: 1。

$(document).ready(function () { $('body').bootstrapMaterialDesign(); });
body, html {
    height: 100%;
}

.flex-grow {
    flex: 1 0 auto;
}

.bmd-layout-canvas {
  flex-grow: 1;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js"></script>
<div id="app" class="d-flex flex-column h-100">
  <nav class="navbar sticky-top banner">
    <a class="navbar-brand" href="#">My App</a>
  </nav>
  
  <div class="d-flex flex-column flex-grow">
    <div class="h-100 flex-grow d-flex flex-column">
      <div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
        <div id="appDrawer" class="bmd-layout-drawer bg-faded">
          <div class="container">
            <header>Hello</header>
            <p>
              This is a longer block of information text.
              Regardless of how long this block of text is,
              the drawer should extend all the to the footer.
            </p>
          </div>
        </div>

        <main class="bmd-layout-content">
          <div class="container">
            <h1>
            Hello
            </h1>
            
                <button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>

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

    <footer>
      <p>Thank you for visiting!</p>
    </footer>
</div>

这是一个小提琴-https://jsfiddle.net/n9c4Lbqa/

答案 1 :(得分：1)

您可以尝试以vh单位设置高度。 1vh等于窗口高度的1％（100vh = 100％）。如果将其与calc结合使用，则可以将其设置为填充窗口高度减去其他元素。

.element {
  height: calc(100vh - 50px);
}

将50px替换为足以清除设计中的高度/页脚的数字。

答案 2 :(得分：1)

也许不是最漂亮的方法，但是可以。

$(document).ready(function () { $('body').bootstrapMaterialDesign(); });
#app {
  height: 100vh;
}

.flex-grow {
  flex-grow: 1;
}

.fill {
  height: 100%;
}

.test-wrap {
  position: relative;
}

.test {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" />

<div id="app" class="d-flex flex-column fill">
  <nav class="navbar sticky-top banner">
    <a class="navbar-brand" href="#">My App</a>
  </nav>

  <div class="flex-grow p-r test-wrap">
    <div class="h-100 flex-grow test">
      <div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
        <div id="appDrawer" class="bmd-layout-drawer bg-faded">
          <div class="container">
            <header>Hello</header>
            <p>
              This is a longer block of information text.
              Regardless of how long this block of text is,
              the drawer should extend all the to the footer.
            </p>
          </div>
        </div>

        <main class="bmd-layout-content">
          <div class="container">
            <h1>
            Hello
            </h1>

                <button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>

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


  <footer>
    <p>Thank you for visiting!</p>
  </footer>
</div>

这是弹性方式：

$(document).ready(function () { $('body').bootstrapMaterialDesign(); });
#app {
  height: 100vh;
}

.flex-grow {
  flex-grow: 1;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" />

<div id="app" class="d-flex flex-column">
  <nav class="navbar sticky-top banner">
    <a class="navbar-brand" href="#">My App</a>
  </nav>

  <div class="flex-grow d-flex test-wrap">
    <div class="flex-grow test"><!-- removed h-100 -->
      <div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
        <div id="appDrawer" class="bmd-layout-drawer bg-faded">
          <div class="container">
            <header>Hello</header>
            <p>
              This is a longer block of information text.
              Regardless of how long this block of text is,
              the drawer should extend all the to the footer.
            </p>
          </div>
        </div>

        <main class="bmd-layout-content">
          <div class="container">
            <h1>
            Hello
            </h1>

                <button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>

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


  <footer>
    <p>Thank you for visiting!</p>
  </footer>
</div>

答案 3 :(得分：1)

类似的事情可能起作用：

提琴：https://jsfiddle.net/aq9Laaew/105279/

CSS 

body, html {
  height: 100%;
  margin: 0;

}
#app {
  min-height: 100%;
}

.flex-grow {
    flex: 1 0 auto;
}

.push {
  height: 50px;
}

HTML 

<div id="app" class="d-flex flex-column h-100">
  <nav class="navbar sticky-top banner">
    <a class="navbar-brand" href="#">My App</a>
  </nav>

  <div class="d-flex flex-column flex-grow push">
    <div class="h-100 flex-grow">
      <div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
        <div id="appDrawer" class="bmd-layout-drawer bg-faded">
          <div class="container">
            <header>Hello</header>
            <p>
              This is a longer block of information text.
              Regardless of how long this block of text is,
              the drawer should extend all the to the footer.
            </p>
          </div>
        </div>

        <main class="bmd-layout-content">
          <div class="container">
            <h1>
            Hello
            </h1>

                <button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>

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


    <footer class="flex-column h-100">
      <p>Thank you for visiting!</p>
    </footer>
</div>
相关问题
最新问题