我试图在我的网站上创建一些可重用的CSS类，以获得更多的一致性和更少的混乱，我坚持试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置高度(因为它将取决于它在网站上的位置)，里面是一个标题<div>，然后是一个无序的项目列表，所有与CSS应用到他们。
它看起来很像这样:
我想让无序列表占据容器<div>的剩余空间，知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100% - 18px的结果”。
我在其他一些关于SO的上下文中看到过这个问题，但我认为对于我的特殊情况，值得再问一次。在这种情况下，有人有什么建议吗?
当前回答
对于一个不同的方法，你可以使用列表中的一些东西:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
只要父容器有position: relative;
其他回答
对于一个不同的方法，你可以使用列表中的一些东西:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
只要父容器有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;
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(); });
