Bootstrap - 填充剩余的垂直空间

我试图用bootstrap来设计这个布局。我把徽标和导航栏，但现在我不得不插入剩余的股利。
我需要将这个div（带问号）扩展到页面的剩余空间（带有图片的边距）。
我不知道徽标或导航栏百分比高度。Bootstrap - 填充剩余的垂直空间

enter image description here

编辑：后我的代码（Yii框架的源页面）

<a href="index.html"><img width="150" src="images/logo.png"/></a> 
<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <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></div> 
     <div class="collapse navbar-collapse" id="yii_booster_collapse_yw0"> 
      <ul id="yw2" class="nav navbar-nav"> 
       <li class="active"> 
        <a href="index.php/site/home">Home</a> 
       </li> 
      </ul> 
      <ul class="pull-right nav navbar-nav" id="yw3"> 
       <li> 
        <a href="index.php/user/profile/edit">Profile</a> 
       </li> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="index.php/site/home">Options <span class="caret"></span> 
        </a> 
        <ul id="yw4" class="dropdown-menu"> 
         <li> 
          <a tabindex="-1" href="index.php/site/contact">Contact Us</a> 
         </li> 
         <li> 
          <a tabindex="-1" href="index.php/user/profile/changepassword">Change password</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
    </div> 
</nav> 
<div id="content"> 
    fill vertical space 
</div>

我需要填写剩余的空间，没有标志/品牌问题。

来源

2015-06-19 enfix

如果您想要答案，请发布您的代码。 –

你可以用div封装并设置高度100％（还有更多，这是快速的答案），或者你可以尝试flexbox，它有一些内置的东西可以做到这一点非常整齐。 – ajmajmajma

如果我使用高度：100％我有滚动条，我不想要这个（如果内容不需要） – enfix

您会在css中看到我使用calc（）中的height值进行减法。

首先使用100vh获取设备屏幕尺寸的视口高度，然后减去要填充的div上方的高度，以占据屏幕的其余部分。

这里是Fiddle。

这是否帮助？

PS：我在您的导航代码中评论过您有额外的div以及我在哪里添加了</li>。

.block { 
    height: -webkit-calc(100vh - 72px); 
    height: -moz-calc(100vh - 72px); 
    height: calc(100vh - 72px); 
    background-color: rgba(90,90,190,0.8); 
}

来源

2015-06-20 02:20:52 AngularJR

如果你不知道顶部元素的高度（即它是根据其内容动态计算的）？ – kgreenek

您好，您可能需要尝试使用一些JS代码来动态计算并将其输入到计算中。 – AngularJR

Bootstrap - 填充剩余的垂直空间

回答

相关问题