关于html:Bootstrap – 填充剩余的垂直空间

Bootstrap - fill remaining vertical space

本问题已经有最佳答案,请猛点这里访问。

我正在尝试使用引导设计这个布局。我把商标和导航栏,但现在我必须插入其余的分区。我需要将这个分区(带问号)扩展到页面的剩余空间(带图片那样的边距)。我不知道标志或导航栏的百分比高度。

enter image description here

编辑:发布我的代码(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中看到我在height值中使用calc()进行减法。

首先使用100vh获得设备屏幕大小的视区高度,然后减去要填充的DIV上方的高度,以占据屏幕的其余部分。

这是小提琴。

这有帮助吗?

附言:我在你的导航代码中评论了你有一个额外的div,在这里我添加了一个

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);
}