gpt4 book ai didi

html - Bootstrap 行自定义高度百分比

转载 作者:太空狗 更新时间:2023-10-29 13:46:17 26 4
gpt4 key购买 nike

我正在开发一个小网站,但遇到了一些麻烦。

我想要的是调整具有特定高度的“行”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 是视口(viewport)高度的 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;
}

还有 fiddle :http://jsfiddle.net/bmwoLkdr/

随意玩弄高度,自己看看吧!

关于html - Bootstrap 行自定义高度百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32573507/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com