Bootstrap - fill remaining vertical space
本问题已经有最佳答案,请猛点这里访问。
我正在尝试使用引导设计这个布局。我把商标和导航栏,但现在我必须插入其余的分区。我需要将这个分区(带问号)扩展到页面的剩余空间(带图片那样的边距)。我不知道标志或导航栏的百分比高度。
编辑:发布我的代码(yii框架的源页面)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <img width="150" src="images/logo.png"/> <nav class="navbar navbar-default"> <button class="navbar-toggle btn btn-default" data-toggle="collapse" data-target="#yii_booster_collapse_yw0" id="yw1" name="yt0" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul id="yw2" class="nav navbar-nav"> <li class="active"> Home </li> </ul> <ul class="pull-right nav navbar-nav" id="yw3"> <li> Profile </li> <li class="dropdown"> Options <span class="caret"></span> <ul id="yw4" class="dropdown-menu"> <li> Contact Us </li> <li> Change password </li> </ul> </li> </ul> </nav> fill vertical space |
我需要填补剩余的空间,而不是商标/品牌问题。
您将在CSS中看到我在
首先使用
这是小提琴。
这有帮助吗?
附言:我在你的导航代码中评论了你有一个额外的
1 2 3 4 5 6 | .block { height: -webkit-calc(100vh - 72px); height: -moz-calc(100vh - 72px); height: calc(100vh - 72px); background-color: rgba(90,90,190,0.8); } |