web-dev-qa-db-ja.com

Twitter Bootstrap 3レスポンシブフルハイトグリッド

まず第一に、私の英語が下手でごめんなさい：S。 bootstrap 3.私の問題はグリッドです。コンテナと内部divに100％の高さを設定する方法がわかりません。幅は完璧ですが、高さ： S。

このCSSを試してみましたが、機能しません。

html body .container-fluid{
min-height:100%;
height:100%;
}

.border3{
min-height:20%;
height:20%;
}

.border4{
min-height:20%;
height:20%;
}

.border5{
min-height:20%;
height:20%;
}

HTML + CSS： http://jsfiddle.net/z5dpu7od/1/

たぶん私はJavaScriptでこの問題を解決することができます。ブラウザの高さを取得して.container-fluid要素に適用できますが、CSSでのみ試してみたいと思います。

ご回答有難うございます ：）。

htmlcssresponsive-designtwitter-bootstrap-3fullscreen
3
mrroot5

コンテンツを行グループに分割し、各グループの高さを設定するために使用できます。 cssの高さは、要素の祖先にすべて高さが設定されている場合にのみ機能します。したがって、デモでは、要素を3つの主要な行グループにグループ化したことがわかります。メニュー（ウィンドウ/ビューポートの高さの80％に設定）、ナビゲーションリンク（5％に設定）、およびブランドです。 （15％に設定されています）。これを行うと、それらの行グループ内の要素にパーセンテージで高さを指定することもできます。たとえば、メニューグループには5つのネストされた行があり、それぞれをheight: 20%に設定することで同じ高さにすることができます。

デモ

CSS：

html, body, .container-fluid {
    height:100%;
}
.menusrow {
    height: 80%;
}
.navrow {
    height: 5%;
}
.brandrow {
    height: 15%;
}
.menusrow .row {
    height: 20%;
}
.border1 {
    text-align: center;
    height: 100%;
}
.border2 {
    text-align: center;
    padding: 10px;
    background-color: red;
    border: 1px solid black;
    height: 100%;
}
.border3 {
    text-align: center;
    padding: 10px;
    background-color: green;
    border: 1px solid black;
    height: 100%;
}
.border4 {
    text-align: center;
    padding: 10px;
    background-color: orange;
    border: 1px solid black;
    height: 100%;
}
.border5 {
    text-align: center;
    padding: 10px;
    background-color: blue;
    border: 1px solid black;
    color: white;
    height: 100%;
}

HTML：

<div class="container-fluid">
    <div class="row menusrow">
        <div class="col-xs-12 col-md-6 border1">
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 1</div>
                <div class="col-xs-4 col-md-4 border4">MENU 2</div>
                <div class="col-xs-4 col-md-4 border5">MENU 3</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 4</div>
                <div class="col-xs-4 col-md-4 border4">MENU 5</div>
                <div class="col-xs-4 col-md-4 border5">MENU 6</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 7</div>
                <div class="col-xs-4 col-md-4 border4">MENU 8</div>
                <div class="col-xs-4 col-md-4 border5">MENU 9</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 10</div>
                <div class="col-xs-4 col-md-4 border4">MENU 11</div>
                <div class="col-xs-4 col-md-4 border5">MENU 12</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 13</div>
                <div class="col-xs-4 col-md-4 border4">MENU 14</div>
                <div class="col-xs-4 col-md-4 border5">MENU 15</div>
            </div>
        </div>
    </div>
    <div class="row navrow">
        <div class="col-xs-12 col-md-12" style="text-align:right;">EVENTS | CONTACT | ABOUT</div>
    </div>
    <div class="row brandrow">
        <div class="col-xs-12  col-md-6 border2">
             <h1>portada</h1>
        </div>
    </div>
</div>
12
jme11

これはcssで解決でき、javascriptは必要ありません。

高さが100％の場合、コンテナの階層全体を、最も内側のdivから<html>要素までの高さを100％に設定します。

まず、最初のcssは次のように開始する必要があります。

html, body, .container-fluid{
   height:100%;
}

要素間のコンマに注意してください。これは、すべての要素の高さが100％に設定されるようにするためです。 .container-fluidを100％の高さに設定するだけのバージョンの代わりに。

3
Andrei Dvoynos

あなたが何を達成しようとしているのかを知るのは難しいですが、これは私がデザインで行うことです。私が頻繁に使用するものの1つは、レスポンシブな同じ高さのJQueryマッチハイトを作成するための小さなスクリプトです。これは、レスポンシブな等しい高さ用です。

スクリプト： http://brm.io/jquery-match-height/

**デモ： http://jsbin.com/depoq/1/ ****

enter image description here

次に、次のように適用されます。

$(document).ready(function () {
    /* ----------  equal height columns   -------- */
    $('.inner').matchHeight();
}); // end document ready

次に、クラス.inner（この例では）を正しい場所に追加する必要があります。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-6 border1">
          <div class="inner">
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 1</div>
                <div class="col-xs-4 col-md-4 border4">MENU 2</div>
                <div class="col-xs-4 col-md-4 border5">MENU 3</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 4</div>
                <div class="col-xs-4 col-md-4 border4">MENU 5</div>
                <div class="col-xs-4 col-md-4 border5">MENU 6</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 7</div>
                <div class="col-xs-4 col-md-4 border4">MENU 8</div>
                <div class="col-xs-4 col-md-4 border5">MENU 9</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 10</div>
                <div class="col-xs-4 col-md-4 border4">MENU 11</div>
                <div class="col-xs-4 col-md-4 border5">MENU 12</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 13</div>
                <div class="col-xs-4 col-md-4 border4">MENU 14</div>
                <div class="col-xs-4 col-md-4 border5">MENU 15</div>
               </div><!-- inner -->
            </div>
            <div class="row">
                <div class="col-xs-12 col-md-12" style="text-align:right;">EVENTS | CONTACT | ABOUT</div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 border2 inner">
             <h1>portada</h1></div>
    </div>
</div>
3
Christina