我试图在我的网站上创建一些可重用的CSS类，以获得更多的一致性和更少的混乱，我坚持试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置高度(因为它将取决于它在网站上的位置)，里面是一个标题<div>，然后是一个无序的项目列表，所有与CSS应用到他们。
它看起来很像这样:
我想让无序列表占据容器<div>的剩余空间，知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100% - 18px的结果”。
我在其他一些关于SO的上下文中看到过这个问题，但我认为对于我的特殊情况，值得再问一次。在这种情况下，有人有什么建议吗?
当前回答
假设头部高度为17px
css列表:
height: 100%;
padding-top: 17px;
头css:
height: 17px;
float: left;
width: 100%;
其他回答
谢谢，我在你的帮助下解决了我的问题，稍微调整了一下，因为我想要一个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;
}
注意显示:块;视频标签。
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;
在要减去像素的元素上使用负边距。(所需的元素) 使溢出:隐藏;在包含元素上 溢出开关:自动;在所需元素上。
这对我很管用!
我用Jquery来做这个
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
然后我绑定窗口调整大小，每当浏览器窗口调整大小时(如果容器的大小随窗口调整大小而改变)
$(window).resize(function() { setSizes(); });
你可以使用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);
