Question

我有关于bootstrap v4-alpha的问题。在这里环顾四周后，我已经尝试了一些事情并没有运气。这是我正在尝试的： -

 
          html, body {
            height: 100%;
          }
          .green{
            background-color: Green;
          }
          .dgreen{
            background-color: #006400;
          }
          .fill {
            min-height: 100%;
            height: 100%;
          }

  
    <div class="container-fluid h-100">
      <div class="row h-10">
        <div class="col-md-10 green">Titel</div>
        <div class="col-md-2 dgreen">Nr</div>
      </div>
      <div class="row h-90">
        <div class="col-md-10 dgreen">Content</div>
        <div class="col-md-2 green">Sidebar</div>
      </div>
    </div>

我正在尝试让我的布局覆盖整个网站，然后让行和列占据一定比例。但是在Chrome的开发工具中它似乎没有占据全部高度。

正如您所看到的，我已经在这里找到了一些代码和示例，但没有运气。谢谢，如果你能提供帮助。

Answer 1

将此css用于覆盖全屏高度。

.container-fluid.h-100 {
  height: 100vh !important;
}

＆＃13;

 html, body {
  height: 100%;
}
.green{
  background-color: Green;
}
.dgreen{
  background-color: #006400;
}
.fill {
  min-height: 100%;
  height: 100%;
}
.h-90 {
  height: 90%;
}
.h-10 {
  height: 10%;
}
.container-fluid.h-100 {
  height: 100vh !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container-fluid h-100">
  <div class="row h-10">
    <div class="col-md-10 green">Titel</div>
    <div class="col-md-2 dgreen">Nr</div>
  </div>
  <div class="row h-90">
    <div class="col-md-10 dgreen">Content</div>
    <div class="col-md-2 green">Sidebar</div>
  </div>
</div>

＆＃13;

Answer 2

Bootstrap 4不支持10％和90％的高度。您可以使用25％，50％，75％和100％

Bootstrap4-alpha - 使网格布局占用100％的大小，行占用百分比

2 个答案: