Question

首先，抱歉我的英语不好：S。我想要一个响应全高度网格使用bootstrap 3.我的问题是网格，我不知道如何设置100％高度容器和内部div。宽度是完美的但高度：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进行尝试。

感谢您的回答:)。

Answer 1

将您的内容分解为可用于设置每个分组的高度的行组。 css中的高度仅在元素的祖先都设置了高度时才有效。因此，在演示中，您可以看到我将您的元素分组为三个主要行组：菜单（我设置为窗口/视口高度的80％），导航链接（设置为5％）和品牌（设定为15％）。这样做，允许您以百分比形式给出这些行组高度中的元素。例如，菜单组有五个嵌套行，您可以通过将它们设置为height: 20%来提供相同的高度。

Demo

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>

Answer 2

这可以用css解决，不需要javascript。

对于100％高度，您希望将容器的完整层次结构设置为100％高度，从最里面的div，一直到<html>元素。

首先，你的初始css应该从这开始：

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

注意元素之间的逗号，这样所有元素的高度都设置为100％。而不是只将.container-fluid设置为100％高度的版本。

Answer 3

很难知道你想要达到的目标，但这就是我对设计的看法。我经常使用的一件事是一个小脚本，使响应相等的高度JQuery Match Height，它具有响应性相等的高度。

脚本：http://brm.io/jquery-match-height/

** DEMO：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>

Twitter Bootstrap 3响应全高度网格

3 个答案:

Demo