ブートストラップ行のカスタム高さをパーセントで

私は少しのウェブサイトを開発していますが、私はいくつかの問題に直面しています。ブートストラップ行のカスタム高さをパーセントで

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

クラス、それが有効にならないように、今の「-最初の行には」何のルールを持っていない：はここに私のコードです。「行優先」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 { 

}

出典

2015-09-14 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/

は、高さと遊ぶこと自由に感じなさいと自分の目で確かめてください！

出典

2015-09-14 20:48:06 pgruber

こんにちはpgruber、返信いただきありがとうございますが、私の問題は、ビューポートの80％、つまり表示可能なブラウザの高さの80％が欲しいということです。あなたのアプローチを使用して私は正確に高さを変更することができますが、.container-fluidルール（高さ：100％）は、コンテナ流体がビューポートの高さから外れることを可能にします。 –

彼の例のように '.container-fluid'のサブコンテナを定義して' height：80％; 'を設定することはできませんか？ – UltraSonja

ブートストラップ行のカスタム高さをパーセントで

答えて

関連する問題