Bootstrap - 填充剩余的垂直空间[重复]

Posted 2023-03-06

【中文标题】Bootstrap - 填充剩余的垂直空间[重复]

【英文标题】：Bootstrap - fill remaining vertical space [duplicate]

【发布时间】：2015-09-06 01:23:30

【问题描述】：

我正在尝试使用引导程序设计此布局。我放了徽标和导航栏，但现在我必须插入剩余的 div。 我需要将此 div（带有问号）扩展到页面的剩余空间（带有如图所示的边距）。 我不知道徽标或导航栏百分比高度。

---

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

 <a href="index.html"><img  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>

我需要填充剩余空间，而不是徽标/品牌问题。

【问题讨论】：

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

你可以用 div 包裹起来并设置 100% 的高度（还有更多，这是一个快速的答案），或者你可以试试 flexbox，它内置了一些非常简洁的功能。跨度>

如果我使用 height:100% 我有滚动条，我不想要这个（如果不需要内容）

【参考方案1】：

您将在 css 中看到我在 heightvalue 中使用 calc() 进行减法。

首先使用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);
 

【讨论】：

如果不知道顶部元素的高度（即根据其内容动态计算）怎么办？

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