我试图在我的网站上创建一些可重用的CSS类，以获得更多的一致性和更少的混乱，我坚持试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置高度(因为它将取决于它在网站上的位置)，里面是一个标题<div>，然后是一个无序的项目列表，所有与CSS应用到他们。
它看起来很像这样:
我想让无序列表占据容器<div>的剩余空间，知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100% - 18px的结果”。
我在其他一些关于SO的上下文中看到过这个问题，但我认为对于我的特殊情况，值得再问一次。在这种情况下，有人有什么建议吗?
当前回答
对于一个不同的方法，你可以使用列表中的一些东西:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
只要父容器有position: relative;
其他回答
box-sizing试试。列表如下:
height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;
对于头文件:
position: absolute;
left: 0;
top: 0;
height: 10px;
当然，父容器应该是这样的:
position: relative;
假设头部高度为17px
css列表:
height: 100%;
padding-top: 17px;
头css:
height: 17px;
float: left;
width: 100%;
另一种实现相同目标的方法是:伸缩盒。 将容器设置为列伸缩框，然后您可以自由地允许某些元素具有固定大小(默认行为)或填充/收缩容器空间(使用flex-grow:1和flex-shrink:1)。
#wrap {
display:flex;
flex-direction:column;
}
.extendOrShrink {
flex-shrink:1;
flex-grow:1;
overflow:auto;
}
参见https://jsfiddle.net/2Lmodwxk/ (试着延长或缩小窗口来观察效果)
注意:你也可以使用速记属性:
flex:1 1 auto;
你可以使用calc:
height: calc(100% - 18px);
请注意，一些旧的浏览器不支持CSS3 calc()函数，因此可能需要实现特定于供应商的函数版本:
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
我不确定这是否在您的特定情况下工作，但我发现，如果包含div是固定大小，内div的填充将推动内容在div内部。你必须浮动或绝对定位你的头元素，但除此之外，我还没有尝试过这种可变大小的div。
