Html Twitter Bootstrap 3 响应式全高网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25220146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3 responsive full height grid
提问by mrroot5
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.
首先，对不起我糟糕的英语：S。我想要一个使用 bootstrap 3 的响应式全高网格。我的问题是网格，我不知道如何将 100% 高度设置为容器和内部 div。宽度是完美的，但高度：S。
I try with this CSS but it doesn't work:
我尝试使用此 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/
HTML+CSS：http: //jsfiddle.net/z5dpu7od/1/
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.
也许我可以用 JavaScript 解决这个问题。我可以获取浏览器高度并将其应用于 .container-fluid 元素，但我只想使用 CSS 进行尝试。
Thanks for your answer :).
感谢您的回答 ：）。
回答by jme11
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 中的高度仅在元素的祖先都设置了高度时才有效。因此，在演示中，您可以看到我将元素分为三个主要行组：菜单（我设置为窗口/视口高度的 80%）、导航链接（设置为 5%）和品牌（设置为 15%）。这样做后，您还可以以百分比形式为这些行组中的元素提供高度。例如，菜单组有五个嵌套行，您可以通过将它们设置为 来赋予相同的高度height: 20%。
Demo
演示
CSS:
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:
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>
回答by Christina
It's difficult to know what you are trying to achieve, but this is what I would do with the design. One thing I use frequently is a small script to make responsive equal heights JQuery Match Height, it's for responsive equal heights.
很难知道您想要实现什么，但这就是我对设计所做的。我经常使用的一件事是一个小脚本来制作响应式等高 JQuery 匹配高度，它用于响应式等高。
SCRIPT: http://brm.io/jquery-match-height/
脚本：http: //brm.io/jquery-match-height/
**DEMO: http://jsbin.com/depoq/1/****
**演示：http: //jsbin.com/depoq/1/****
Then it's applied like this:
然后它是这样应用的：
$(document).ready(function () {
/* ---------- equal height columns -------- */
$('.inner').matchHeight();
}); // end document ready
Then you need to add the class .inner(in this example) in the correct places.
然后您需要.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>
回答by Andrei Dvoynos
This can be solved with css, no need for javascript.
这可以用 css 解决，不需要 javascript。
For 100% height you want to set the full hierarchy of containers to 100% height, from your innermost div, all the way to the <html>element.
对于 100% 高度，您希望将容器的完整层次结构设置为 100% 高度，从最里面的 div 一直到<html>元素。
To start with, your initial css should start with this:
首先，你的初始 css 应该从这个开始：
html, body, .container-fluid{
height:100%;
}
Notice the comma between the elements, this is so that all of them have the height set to 100%. Instead of your version which only sets the .container-fluid to be 100% height.
注意元素之间的逗号，这是为了让所有元素的高度都设置为 100%。而不是您的版本只将 .container-fluid 设置为 100% 高度。
