我试图在我的网站上创建一些可重用的CSS类，以获得更多的一致性和更少的混乱，我坚持试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置高度(因为它将取决于它在网站上的位置)，里面是一个标题<div>，然后是一个无序的项目列表，所有与CSS应用到他们。
它看起来很像这样:
我想让无序列表占据容器<div>的剩余空间，知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100% - 18px的结果”。
我在其他一些关于SO的上下文中看到过这个问题，但我认为对于我的特殊情况，值得再问一次。在这种情况下，有人有什么建议吗?
当前回答
你可以使用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;
你可以使用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);
不要将高度定义为百分比，只需设置top=0和bottom=0，如下所示:
#div {
top: 0; bottom: 0;
position: absolute;
width: 100%;
}
在要减去像素的元素上使用负边距。(所需的元素) 使溢出:隐藏;在包含元素上 溢出开关:自动;在所需元素上。
这对我很管用!
我尝试了一些其他的答案，没有一个像我想要的那样有效。我们的情况非常类似，我们有一个窗口标题，窗口可以通过窗口主体中的图像调整大小。我们想要锁定调整大小的纵横比，而不需要添加计算来考虑头部的固定大小，并且仍然让图像填充窗口体。
下面我创建了一个非常简单的代码片段，展示了我们最终所做的事情，它似乎很适合我们的情况，并且应该与大多数浏览器兼容。
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>
