我正在尝试创建一些可重用的CSS类，以便在我的网站上实现更高的一致性和更少的混乱，而且我一直试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置它的高度（因为它会根据网站的位置而有所不同），里面是一个标题<div>，然后是一个无序的项目列表，全部都是CSS适用于他们。
看起来很像这样：
我希望无序列表占据容器<div>中的剩余空间，知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100%减去18px的结果”。
我已经在其他几个背景下看过这个问题了，但我认为值得再次询问我的具体案例。有没有人在这种情况下有任何建议？
我意识到这是一个老帖子，但鉴于它没有被建议，值得一提的是，如果你正在为CSS3兼容的浏览器编写，你可以使用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);
实现相同目标的另一种方法：弹性盒子。使容器成为一个列弹性框，然后您可以自由地允许某些元素具有固定大小（默认行为）或填充/收缩到容器空间（使用flex-grow：1和flex-收缩：1）。
#wrap {
display:flex;
flex-direction:column;
}
.extendOrShrink {
flex-shrink:1;
flex-grow:1;
overflow:auto;
}
请参阅https://jsfiddle.net/2Lmodwxk/（尝试扩展或缩小窗口以注意效果）
注意：您也可以使用速记属性：
flex:1 1 auto;
我不确定这是否适用于您的特定情况，但我发现如果包含div是固定大小，内部div上的填充将推送div内部的内容。你必须浮动或绝对定位你的标题元素，否则，我没有尝试过这个可变大小的div。
对于一些不同的方法，您可以在列表中使用这样的东西：
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
只要父容器具有position: relative;，这就可以工作
我使用Jquery
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
然后我绑定窗口调整大小以重新调整浏览器窗口大小（如果容器的大小更改与窗口调整大小）
$(window).resize(function() { setSizes(); });
不要将高度定义为百分比，只需设置top=0和bottom=0，如下所示：
#div {
top: 0; bottom: 0;
position: absolute;
width: 100%;
}
假设17px标题高度
列出css：
height: 100%;
padding-top: 17px;
标题css：
height: 17px;
float: left;
width: 100%;
overflow:hidden;overflow:auto;。它对我有用！
尝试盒子大小。对于列表：
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;
我尝试了其他一些答案，但没有一个能够完全符合我的要求。我们的情况非常相似，我们有一个窗口标题，窗口可以调整窗体中的图像。我们想要锁定调整大小的宽高比，而不需要添加计算来考虑标题的固定大小，并且仍然让图像填充窗体。
下面我创建了一个非常简单的代码片段，它显示了我们最终做的事情似乎适用于我们的情况，并且应该兼容大多数浏览器。
在我们的窗口元素上，我们添加了20px的边距，这有助于相对于屏幕上的其他元素进行定位，但不会影响窗口的“大小”。然后绝对定位窗口标题（将其从其他元素的流中移除，因此不会导致其他元素如无序列表被移位）并且其顶部位于-20px，这将标题置于边距内的窗口。最后我们的ul元素被添加到窗口，高度可以设置为100％，这将导致它填充窗口的主体（不包括边距）。
*,*:before,*:after
{
box-sizing: border-box;
}
.window
{
position: relative;
top: 20px;
left: 50px;
margin-top: 20px;
width: 150px;
height: 150px;
}
.window-header
{
position: absolute;
top: -20px;
height: 20px;
border: 2px solid black;
width: 100%;
}
ul
{
border: 5px dashed gray;
height: 100%;
}<div class="window">
<div class="window-header">Hey this is a header</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>谢谢，我在你的帮助下解决了我的问题，调整了一点，因为我想要一个100％宽度100％高度（底部条的高度较少）并且身体没有滚动（没有黑客/隐藏滚动条）。
对于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.adjusted的值放在底部而不是底部条高度，否则会出现垂直滚动条，我调整为最接近的值。
这种差异是因为动态区域中的一个元素是添加了一个额外的底洞，我不知道如何摆脱...它是一个视频标签（HTML5），请注意我把这个视频标签与此css（所以它没有理由制作一个底洞，但确实如此）：
video{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
目标：有一个视频占用100％的浏览器（并在调整浏览器大小时动态调整大小，但不改变宽高比）减去我用于带有一些文本，按钮等的div的底部空间（和验证器） w3c＆css当然）。
编辑：我找到了原因，视频标签就像文本，而不是块元素，所以我用这个css修复它：
video{
display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
请注意视频标签上的display:block;。