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

html – Bootstrap行自定义高度百分比,第1张

概述我正在开发一个小网站,我面临一些麻烦. 我想要的是调整具有特定高度的“行”div的百分比. 我已经搜索了SO,但没有什么对我有好处. 这是我的代码: <body> <nav class="navbar navbar-inverse navbar-static-top"> ... </nav> <!-- END NAVBAR --> <div class="contain 我正在开发一个小网站,我面临一些麻烦.

我想要的是调整具有特定高度的“行”div的百分比.
我已经搜索了SO,但没有什么对我有好处.
这是我的代码:

<body>  <nav >      ...  </nav>  <!-- END NAVbar -->  <div >      <div >          <img  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/

随意玩高度,亲眼看看吧!

总结

以上是内存溢出为你收集整理的html – Bootstrap行自定义高度百分比全部内容,希望文章能够帮你解决html – Bootstrap行自定义高度百分比所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/1138909.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-31
下一篇2022-05-31

发表评论

登录后才能评论

评论列表(0条)

    保存