我试图在我的网站上创建一些可重用的CSS类，以获得更多的一致性和更少的混乱，我坚持试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置高度(因为它将取决于它在网站上的位置)，里面是一个标题<div>，然后是一个无序的项目列表，所有与CSS应用到他们。
它看起来很像这样:
我想让无序列表占据容器<div>的剩余空间，知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100% - 18px的结果”。
我在其他一些关于SO的上下文中看到过这个问题，但我认为对于我的特殊情况，值得再问一次。在这种情况下，有人有什么建议吗?
当前回答
对于一个不同的方法，你可以使用列表中的一些东西:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
只要父容器有position: relative;
其他回答
我不确定这是否在您的特定情况下工作，但我发现，如果包含div是固定大小，内div的填充将推动内容在div内部。你必须浮动或绝对定位你的头元素，但除此之外，我还没有尝试过这种可变大小的div。
对于一个不同的方法，你可以使用列表中的一些东西:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
只要父容器有position: relative;
假设头部高度为17px
css列表:
height: 100%;
padding-top: 17px;
头css:
height: 17px;
float: left;
width: 100%;
我用Jquery来做这个
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
然后我绑定窗口调整大小，每当浏览器窗口调整大小时(如果容器的大小随窗口调整大小而改变)
$(window).resize(function() { setSizes(); });
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;
