我试图在我的网站上创建一些可重用的CSS类，以获得更多的一致性和更少的混乱，我坚持试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置高度(因为它将取决于它在网站上的位置)，里面是一个标题<div>，然后是一个无序的项目列表，所有与CSS应用到他们。
它看起来很像这样:
我想让无序列表占据容器<div>的剩余空间，知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100% - 18px的结果”。
我在其他一些关于SO的上下文中看到过这个问题，但我认为对于我的特殊情况，值得再问一次。在这种情况下，有人有什么建议吗?
当前回答
不要将高度定义为百分比，只需设置top=0和bottom=0，如下所示:
#div {
top: 0; bottom: 0;
position: absolute;
width: 100%;
}
其他回答
你可以使用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);
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;
另一种实现相同目标的方法是:伸缩盒。 将容器设置为列伸缩框，然后您可以自由地允许某些元素具有固定大小(默认行为)或填充/收缩容器空间(使用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;
我用Jquery来做这个
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
然后我绑定窗口调整大小，每当浏览器窗口调整大小时(如果容器的大小随窗口调整大小而改变)
$(window).resize(function() { setSizes(); });
我尝试了一些其他的答案，没有一个像我想要的那样有效。我们的情况非常类似，我们有一个窗口标题，窗口可以通过窗口主体中的图像调整大小。我们想要锁定调整大小的纵横比，而不需要添加计算来考虑头部的固定大小，并且仍然让图像填充窗口体。
下面我创建了一个非常简单的代码片段，展示了我们最终所做的事情，它似乎很适合我们的情况，并且应该与大多数浏览器兼容。
On our window element we added a 20px margin which contributes to positioning relative to other elements on the screen, but does not contribute to the "size" of the window. The window-header is then positioned absolutely (which removes it from the flow of other elements, so it won't cause other elements like the unordered list to be shifted) and its top is positioned -20px which places the header inside of the margin of the window. Finally our ul element is added to the window, and the height can be set to 100% which will cause it to fill the window's body (excluding the margin).
*,*: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>
