Html Bootstrap 行自定义高度百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32573507/
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
Bootstrap row custom height in percentage
提问by panc_fab
I'm developing a little website and I'm facing some troubles.
我正在开发一个小网站，但遇到了一些麻烦。
What I want is to resize a "row" div with a particular height, in percentage. I've already searched on SO but nothing was good for me. Here is my code:
我想要的是调整具有特定高度的“行”div 的大小，以百分比为单位。我已经在 SO 上搜索过，但没有什么对我有好处。这是我的代码：
<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>
class "row-first" for now has no rules so it not take effect. I want that "row-first" div is 80% of the viewport's height, but the only way to resize it is by putting some content inside the div so that the div's height follows content height. my CSS:
类“行优先”现在没有规则，所以它不会生效。我希望“行优先”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 {
}
采纳答案by pgruber
The height of the div is relative to the height of the parent. Therefor, to make the height of .row 80%, I first set the height of the parent. Here's the css:
div 的高度是相对于父级的高度的。因此，为了使 .row 的高度为 80%，我首先设置父级的高度。这是CSS：
.container-fluid {
height: 100%;
padding-left: 0px;
padding-right: 0px;
}
.row-first {
height:80%;
overflow: hidden;
}
And the fiddle: http://jsfiddle.net/bmwoLkdr/
和小提琴：http: //jsfiddle.net/bmwoLkdr/
Feel free to play with the height and see for yourself!
随意玩玩高度，亲眼看看！
