Пользовательская высота строки Bootstrap в процентах

Я разрабатываю небольшой сайт, и я столкнулся с некоторыми проблемами.

Я хочу изменить размер" строки " div с определенной высотой в процентах. Я уже искал так, но ничего хорошего для меня не было. Вот мой код:

<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>

класс "row-first" пока не имеет правил, поэтому он не вступает в силу. Я хочу, чтобы div "row-first" составлял 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 {

}
7
css height html row twitter-bootstrap

1 ответов

высота div относительно высоты родителя. Для того, чтобы сделать высоту .строка 80%, я сначала установил высоту родителя. Вот css:

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

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

и скрипка:http://jsfiddle.net/bmwoLkdr/

Не стесняйтесь играть с высотой и убедитесь сами!

6