web-dev-qa-db-ja.com

Bootstrap行のカスタムの高さのパーセンテージ

小さなウェブサイトを開発していて、いくつかの問題に直面しています。

私が欲しいのは、特定の高さの「行」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>

現在のところ「行優先」クラスにはルールがないため、有効になりません。 「行優先」の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 {

}
htmlcsstwitter-bootstrapheightrow
9
panc_fab

Divの高さは、親の高さを基準にしています。そのため、.rowの高さを80％にするために、最初に親の高さを設定しました。ここにCSSがあります：

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

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

そしてフィドル： http://jsfiddle.net/bmwoLkdr/

高さを自由に遊んで、自分の目で確かめてください！

8
pgruber