如何使用CSS使用填充来制作长度可变的菜单，使其延伸到屏幕底部？

Question

这样的情况是：我有一个菜单，其中包含一些固定长度的内容，然后是一些可变长度的可滚动内容。 我想使可变长度部分的最大高度延伸到屏幕底部减去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。

Answer 1

我不确定您要寻找什么，这可能有帮助吗？

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

更多内容，请访问： https : //css-tricks.com/a-couple-of-use-cases-for-calc/

Answer 2

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

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

检查此小提琴： http : //jsfiddle.net/Loqy7yfr/

Answer 3

这么多不同的场景以及可能的解决方案根据您的html结构和其他特定需求而有所不同，这是一个非常粗糙的示例：

演示： http ： //jsfiddle.net/1f7hbgp6/4/

CSS：

* {
    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width:100%;
    height:100%;
}
.menu-1 {
    position: absolute;
    height:100%;
    width:200px;
}
.menu-1 > ul {
    position: absolute;
    top: 0px;
    bottom:0px;
    padding-bottom: 70px; /* any padding */
    border:1px solid #0ff;
}
.menu-1 > ul > li {
    display: block;
}
.menu-1 > ul > li:first-child {
    height:32px;
}
.menu-1 > ul > li:nth-child(2) {
    overflow-y:auto;
    max-height:calc(100% - 32px);
}

HTML：

<div class="menu-1">
    <ul>
        <li>32px top content</li>
        <li>? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length ? px - variable length</li>
    </ul>
</div>

Answer 4

检查此代码是否有帮助...

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

点击我

的HTML

  <div id="wrap">
    <div class="header">
        Head/Title
    </div>
    <div class="content">
        Content goes here
    </div>
    <div class="footer">
        Footer
    </div>

的CSS

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

Answer 5

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

calc(100vh - 50px);

这是一个快速演示： http : //jsfiddle.net/DerekL/h2q4u0us/

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

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

目前，所有主要的浏览器都支持calc 。

Answer 6

这是一个无需使用calc的解决方案，即使它可能得到广泛支持，实际上在这种情况下也无需使用它。 当然，它可以使您的生活更轻松，但是，如果您只知道一些元素的height ，则可以使用填充和定位来完成这项工作。

希望这可以帮助。

 html { box-sizing: border-box; min-height: 100%; position: relative; } *, *:before, *:after { box-sizing: inherit; } body { margin:0; } .menu-bar { width: 100%; background-color: black; min-height: 40px; } .menu-bar nav { position: absolute; height: 100%; top: 0; padding: 40px 0 25px; /* top padding height of .menu-bar and bottom-padding */ background: gray; z-index: -1; } .menu-bar .navbar { width: 200px; height: inherit; padding-bottom: 32px; /* remove the height of .top-content from the bottom */ } .menu-bar .top-content { width: inherit; height: 32px; background-color: red; } .menu-bar .variable-content { list-style-type: none; overflow-y: auto; padding: 0 0 0 10px; margin: 0; height: 100%; background: blue; } 

 <div class="menu-bar"> <nav> <div class="navbar"> <div class="top-content"></div> <ul class="variable-content"> <li>item 1</li><li>item 2</li><li>item 3</li> <li>item 4</li><li>item 5</li><li>item 6</li> <li>item 7</li><li>item 8</li><li>item 9</li> <li>item 10</li><li>item 11</li><li>item 12</li> <li>item 13</li><li>item 14</li><li>item 15</li> <li>item 16</li><li>item 17</li><li>item 18</li> <li>item 19</li><li>item 20</li><li>item 21</li> <li>item 22</li><li>item 23</li><li>item 24</li> <li>item 25</li><li>item 26</li><li>item 27</li> <li>item 28</li><li>item 29</li><li>item 30</li> </ul> </div> </nav> </div> 

Answer 7

尝试在小提琴或您自己的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>