web-dev-qa-db-fra.com

Bootstrap hauteur personnalisée de ligne en pourcentage

Je développe un petit site Web et je fais face à quelques problèmes.

Ce que je veux, c'est redimensionner un div "ligne" avec une hauteur particulière, en pourcentage. J'ai déjà cherché sur SO mais rien ne me convenait. Voici mon code:

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

la classe "rangée en premier" n'a pour l'instant pas de règles donc elle ne prend pas effet. Je veux que le div "row-first" soit 80% de la hauteur de la fenêtre, mais la seule façon de le redimensionner est de mettre du contenu à l'intérieur du div afin que la hauteur du div suive la hauteur du contenu. mon 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

La hauteur du div est relative à la hauteur du parent. Pour cela, pour faire la hauteur de .row 80%, j'ai d'abord réglé la hauteur du parent. Voici le css:

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

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

Et le violon: http://jsfiddle.net/bmwoLkdr/

N'hésitez pas à jouer avec la hauteur et voyez par vous-même!

8
pgruber