Twitter Bootstrap 3响应全高度网格 [英] Twitter Bootstrap 3 responsive full height grid

问题描述

首先，对不起我的可怜的英语：S。我想要一个响应全高度网格使用引导3.我的问题是网格，我不知道如何设置100％高度到容器和内部div。宽度是完美的但高度：S。

First of all, sorry for my poor english :S. I want a responsive full height grid using bootstrap 3. My problem is the grid, I don't know how to set 100% height to container and the inside divs. Width is perfect but height :S.

我尝试使用这个CSS，但它不工作：

I try with this CSS but it doesn't work:

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/

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

也许我可以解决这个问题JavaScript。我可以采取浏览器的高度，并应用于.container-fluid元素，但我想尝试它与CSS只。

Maybe I can solve this problem with JavaScript. I can take the browser height and applied it to .container-fluid element but I want to try it with CSS only.

感谢您的回答：）

推荐答案

将您的内容分成行组，您可以使用它们来设置每个分组的高度。如果元素的祖先都有高度设置，css中的高度只会起作用。因此，在演示中，您可以看到我将您的元素分组为三个主行组：菜单（我设置为窗口/视口高度的80％），导航链接（设置为5％）和品牌（设定为15％）。这样做，允许您然后给这些行组中的元素高度百分比。例如，菜单组有五个嵌套行，您可以通过将它们设置为 height：20％来给予相同的高度。

Break up your content into row groups that you can use to set the height for each grouping. Height in css only works if the element's ancestors all have a height set. So, in the demo, you can see that I grouped your elements into three primary row groups: menus (which I set to 80% of the window/viewport height), the navigation links (which is set to 5%) and the brand (which is set to 15%). Doing this, allows you to then give the elements within those row groups heights in percentages as well. For example, the menu group has five nested rows which you can give equal heights by setting them each to 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： b

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

这篇关于Twitter Bootstrap 3响应全高度网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！