我正在开发一个小网站,我面临一些麻烦.
我想要的是调整具有特定高度的“行”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>
“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 {
}
解决方法
div的高度是相对于父级的高度.因此,为了使.row的高度达到80％,我首先设置父级的高度.这是css：
.container-fluid {
height: 100%;
padding-left: 0px;
padding-right: 0px;
}
.row-first {
height:80%;
overflow: hidden;
}
小提琴：http://jsfiddle.net/bmwoLkdr/
随意玩高度,亲眼看看吧！
