Bootstrap 行自定义高度百分比

Question

我正在开发一个小网站，遇到了一些麻烦。

我想要的是调整具有特定高度的 "row" div 的大小，以百分比表示。我已经在 SO 上搜索过，但对我来说没有任何好处。这是我的代码：

<body>
  <nav class="navbar navbar-inverse navbar-static-top">
      ...
  </nav>
  <!-- END NAVBAR -->
  <div class="container-fluid">
      <div class="row row-first">
          <img class="img img-responsive" src="public/img/bg.jpg" />
      </div>
  </div>

class "row-first"暂时没有规则所以不生效。我希望 "row-first" div 是视口高度的 80%，但调整它大小的唯一方法是在 div 中放置一些内容，以便 div高度跟随内容高度。我的 CSS:

html {
    height: 100%;
}

body {
    height: 100%;
}

body {
    font-family: 'Muli', sans-serif;
}

.container-fluid {
    max-height: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

.row {
    margin-left: 0px;
    margin-right: 0px;
    height:80%;
}

.row-first {

}

Answer 1

div的身高是相对于父身高的。因此，为了使 .row 的高度为 80%，我首先设置父项的高度。这是 css:

.container-fluid {
  height: 100%;
  padding-left: 0px;
  padding-right: 0px;
}

.row-first {
  height:80%;
  overflow: hidden;
}

和fiddle：http://jsfiddle.net/bmwoLkdr/

随便玩玩身高，自己看看吧！

Bootstrap 行自定义高度百分比

Bootstrap row custom height in percentage

html

css

height

row

twitter-bootstrap