Question

我正在使用基于bootstrap的sb-admin主题： https://github.com/BlackrockDigital/startbootstrap-sb-admin-2

我正在尝试创建一个完整的高度行，但无法弄明白。

在body标签中，我的html看起来像这样：

<div id="wrapper" class="container">

  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
  </nav>

  <div id="page-wrapper">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="page-header">Dashboard</h1>
      </div>

      <!-- /.col-lg-12 -->
    </div>
    <div class="row">
      <div class="col-lg-8">
        <div class="page-body" style="background: green; height: 100%">Body</div>
      </div>
      <div class="col-lg-4">
        <div class="page-toolbar" style="background: blue; height: 100%">Toolbar</div>
      </div>

      <!-- /.col-lg-12 -->
    </div>




  </div>
  <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

我将页面正文和页面工具栏设置为100％高度，但它们不会展开。我认为他们是100％的父母。问题是我需要设置什么来填充页面。

Answer 1

如果您希望视口的div为全高，则可以给出

到它。这意味着100％的视口高度。

以类似的方式

可用于视口宽度。如果你想具体谈论高度。例如，如果你有一个75px高度的导航栏，并且你希望div覆盖重新区域，你可以使用CSS height: 100vh;方法并给它

width: 100vw;

全高行与bootstrap和sb-admin

1 个答案: