Javascript 我如何使用CSS制作一个长度可变的菜单，它可以通过填充扩展到屏幕底部？

所以情况是这样的：我有一个菜单，它有一些固定长度的内容，后面跟着一些可变长度的可滚动内容。我想让可变长度部分有一个延伸到屏幕底部的最大高度减去x的填充量。举一个直观的例子：

-----
Menu bar  - 40px
-----
* x px padding
*
| 32px top content
*
*
|
|
| ?px - variable length
|
|
*                        
* x px - padding

HTML结构如下所示：

<div class="menu-bar">
  <div class="menu">
    <div class="menu-button"></div>
    <div class="menu-content">
      <div class="header-content"></div>
      <div class="variable-length-content"></div>
    </div>
  </div>
</div>
<div class="main-document">
  ...
</div> 

菜单本身是菜单栏的子菜单，但它绝对位于文档体中，顶部为菜单栏高度+填充量

---

最好的方法是什么？我可能可以用Javascript来实现，但我想知道是否有CSS唯一的方法。

我不确定您在寻找什么，这是否有帮助

.content {
  /* Subtract the header size */
  height: calc(100% - 50px);
}

---

更多信息：

如果您能够使用CSS3，则可以使用vh单位作为视图高度。结合calc减去固定的填充大小

.variable-content {
    height:-webkit-calc(100vh - 300px)
}

检查这把小提琴：

---

根据您的html结构和其他特定需求，有许多不同的场景和可能的解决方案，下面是一个非常粗略的示例：

演示：

CSS:

HTML:

---

如果有帮助，请检查此代码

这是我根据您的要求编写的代码

HTML 您始终可以使用calc简化所有需要的计算：

calc(100vh - 50px);

下面是一个快速演示：

某些浏览器可能需要供应商前缀，例如

-webkit-calc  for Webkit
-moz-calc     for Firefox

---

目前所有主流浏览器都支持calc。

这里有一个不使用calc的解决方案，即使它可能得到广泛支持，在这种情况下实际上也没有必要使用它。当然，它可以让你的生活更轻松，但如果你只知道一些元素的高度，你可以使用填充和定位来实现这一点

希望这有帮助

html{ 框大小：边框框； 最小高度：100%； 位置：相对位置； } *，*：之前，*：之后{ 框大小：继承； } 身体{ 保证金：0； } .菜单栏{ 宽度：100%； 背景色：黑色； 最小高度：40px； } .菜单栏导航{ 位置：绝对位置； 身高：100%； 排名：0； 填充：40px 0 25px；/*顶部填充高度。菜单栏和底部填充*/ 背景：灰色； z指数：-1； } .菜单栏.导航栏{ 宽度：200px； 身高：继承； 填充底部：32px；/*从底部移除.top内容的高度*/ } .菜单栏.顶部内容{ 宽度：继承； 高度：32px； 背景色：红色； } .菜单栏.可变内容{ 列表样式类型：无； 溢出y：自动； 填充：0 10px； 保证金：0； 身高：100%； 背景：蓝色； } 项目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

---

在fiddle或您自己的html中尝试

仅使用CSS的div的可变高度

body,html,.bodyDiv{
    height:100%;
    padding:0px;
    margin:0px;
}

.content{
    background:#000;
}

.topSpacing{
    background:#fefefe;
    height:35px;
}

.bottomSpacing{
    background:#fefefe;
    height:35px;     
}

.table {
    display:table;
    border:0px solid #000;
    border-collapse:collapse;
    height:100%;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    padding:0px;
    border:0px solid #000;
}    

<div class="table">
    <!-- topSpacing -->
    <div class="row topSpacing">
        <div class="cell"></div>
    </div>
    <!-- bottomSpacing -->
    <div class="row content">
        <div class="cell">Conten</div>
    </div>
    <!-- bottomSpacing -->
    <div class="row bottomSpacing">
        <div class="cell"></div>

    </div>
</div>

---

可变长度如何设置长度？@Derek朕會功夫 - 这取决于菜单中的项目数。在大多数情况下，项目数将超过最大高度，需要滚动。但是有一个过滤器，所以菜单可以缩小到小于最大高度。所以基本上你想要一个菜单，它的最大高度是窗口的高度，如果菜单中的内容只有几个项目，那么它可以缩小到不是窗口高度的100%？你的HTML结构是什么？因为这将告诉我们可以应用哪种CSS方法。有很多CSS方法可以实现这样的模板。。。像这样的？但是，无法获得底部填充。。。啊，它是在容器中的，嗯……如果是CSS3，那么flex将是最有效、最简单的方法；根据op提供的html，以下是关于flex的想法：

            #wrap{
                width:100%;
                height:400px;
                background-color:pink;
            }
            .header{
                height:5%;
                background-color:yellow;
                text-align:center;
            }
            .content{
                height:100%;
                background-color:lightblue;
                width:100%;
            }
            .footer{
                height:20px;
                background-color:grey;
            }

calc(100vh - 50px);

-webkit-calc  for Webkit
-moz-calc     for Firefox

body,html,.bodyDiv{
    height:100%;
    padding:0px;
    margin:0px;
}

.content{
    background:#000;
}

.topSpacing{
    background:#fefefe;
    height:35px;
}

.bottomSpacing{
    background:#fefefe;
    height:35px;     
}

.table {
    display:table;
    border:0px solid #000;
    border-collapse:collapse;
    height:100%;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    padding:0px;
    border:0px solid #000;
}    

<div class="table">
    <!-- topSpacing -->
    <div class="row topSpacing">
        <div class="cell"></div>
    </div>
    <!-- bottomSpacing -->
    <div class="row content">
        <div class="cell">Conten</div>
    </div>
    <!-- bottomSpacing -->
    <div class="row bottomSpacing">
        <div class="cell"></div>

    </div>
</div>