Bootstrap 行自定义高度（百分比）
Posted
技术标签:
【中文标题】Bootstrap 行自定义高度（百分比）【英文标题】：Bootstrap row custom height in percentage 【发布时间】：2015-12-10 23:14:54 【问题描述】：我正在开发一个小网站，但遇到了一些麻烦。
我想要的是调整具有特定高度的“行”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" 目前没有规则，所以它不会生效。 我希望“行优先”的 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
【问题讨论】：
【参考方案1】：div 的高度是相对于父级的高度而言的。因此，为了使 .row 的高度为 80%，我首先设置了父级的高度。这是css：
.container-fluid
height: 100%;
padding-left: 0px;
padding-right: 0px;
.row-first
height:80%;
overflow: hidden;
还有小提琴：http://jsfiddle.net/bmwoLkdr/
随意玩高度，亲眼看看！
【讨论】：
嗨 pgruber，感谢您的回复，但我的问题是我想要 80% 的视口，即可见浏览器高度的 80%。使用您的方法，我可以正确修改高度，但 .container-fluid 规则（高度：100%）允许容器流体超出视口高度（即出现滚动条）。 你不能像他的例子那样定义.container-fluid的子容器并设置height: 80%;吗？以上是关于Bootstrap 行自定义高度（百分比）的主要内容，如果未能解决你的问题，请参考以下文章