我试图在我的网站上创建一些可重用的CSS类，以获得更多的一致性和更少的混乱，我坚持试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置高度(因为它将取决于它在网站上的位置)，里面是一个标题<div>，然后是一个无序的项目列表，所有与CSS应用到他们。
它看起来很像这样:
我想让无序列表占据容器<div>的剩余空间，知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100% - 18px的结果”。
我在其他一些关于SO的上下文中看到过这个问题，但我认为对于我的特殊情况，值得再问一次。在这种情况下，有人有什么建议吗?
当前回答
另一种实现相同目标的方法是:伸缩盒。 将容器设置为列伸缩框，然后您可以自由地允许某些元素具有固定大小(默认行为)或填充/收缩容器空间(使用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;
其他回答
不要将高度定义为百分比，只需设置top=0和bottom=0，如下所示:
#div {
top: 0; bottom: 0;
position: absolute;
width: 100%;
}
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;
你可以使用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 100%宽度100%高度(底部栏的高度更少)，身体上没有滚动(没有hack /隐藏滚动条)。
CSS:
html{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
body{
position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
div.adjusted{
position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
}
div.the_bottom_bar{
width:100%;height:31px;margin:0px;border:0px;padding:0px;
}
HTML:
<body>
<div class="adjusted">
// My elements that go on dynamic size area
<div class="the_bottom_bar">
// My elements that goes on bottom bar (fixed heigh of 31 pixels)
</div>
</div>
这做到了技巧，哦，是的，我把一个值略大的div.调整底部比底部栏高度，否则垂直滚动条出现，我调整为最近的值。
这种差异是因为动态区域的一个元素增加了一个额外的底孔，我不知道如何摆脱…这是一个视频标签(HTML5)，请注意，我把视频标签与这个css(所以没有理由让它做一个底部孔，但它确实):
video{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
目标:有一个视频，采取100%的浏览器(并动态调整大小时，浏览器调整大小，但不改变纵横比)少一个底部空间，我使用的一些文本，按钮，等(和验证器w3c和css当然)。
编辑:我找到了原因，视频标签就像文本，不是一个块元素，所以我用这个css修复了它:
video{
display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
注意显示:块;视频标签。
另一种实现相同目标的方法是:伸缩盒。 将容器设置为列伸缩框，然后您可以自由地允许某些元素具有固定大小(默认行为)或填充/收缩容器空间(使用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;
