Html CSS高度作为一个变量，如何计算总屏幕大小的60%

使用Bootstrap（和它的导航栏），我有一个jumbotron，它从屏幕顶部的30%开始。我是用css做的：top=30%。此外，我有一个导航栏，当手机大小调整时，它会下拉菜单。下拉导航栏菜单应始终覆盖jumbotron（所有屏幕尺寸）

因此，从数学上讲，navbar下拉列表的大小应该是jumbotron屏幕大小+高度（以像素为单位）的30%（假设目前已固定，但可能会根据屏幕大小而变化…）

目前，我可以使用以下方法调整导航栏下拉菜单的高度：

.navbar-nav > li > a {
    height: 40px;
    padding-top: 15px;
}

然而，这些都是固定值，我希望它们可以作为变量进行计算（最好使用下拉菜单的“最小总高度”，这样它就不会太小）

---

我不熟悉引导和UI设计等。那么应该如何做到这一点呢？

您可以使用

视口高度

CSS属性来实现这一点，并使用CSS3算法的

calc（）

函数，如下所示：

.navbar-nav > li > a {
    height: calc(30vh + 10px);
}

---

使用

100vh

获取窗口高度也许您可以提供一个JSFIDLE让我们更好地了解您所说的内容@Tushar是的，但是这给我留下了两个问题没有解决：1。它是30vh加上（例如）50px（巨型机车高度）；我该怎么做？2.计算时，如何将其“插入”到“高度：”字段中？实际上，我将是另一个使用下拉菜单中行数的线宽计算…@RononDex我知道小提琴，但我问题的核心很简单：如何在导航栏的高度字段中放置100vh+50px？@musicformellons with。