我试图在我的网站上创建一些可重用的CSS类，以获得更多的一致性和更少的混乱，我坚持试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置高度(因为它将取决于它在网站上的位置)，里面是一个标题<div>，然后是一个无序的项目列表，所有与CSS应用到他们。
它看起来很像这样:
我想让无序列表占据容器<div>的剩余空间，知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100% - 18px的结果”。
我在其他一些关于SO的上下文中看到过这个问题，但我认为对于我的特殊情况，值得再问一次。在这种情况下，有人有什么建议吗?
当前回答
我尝试了一些其他的答案，没有一个像我想要的那样有效。我们的情况非常类似，我们有一个窗口标题，窗口可以通过窗口主体中的图像调整大小。我们想要锁定调整大小的纵横比，而不需要添加计算来考虑头部的固定大小，并且仍然让图像填充窗口体。
下面我创建了一个非常简单的代码片段，展示了我们最终所做的事情，它似乎很适合我们的情况，并且应该与大多数浏览器兼容。
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>
其他回答
你可以使用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);
另一种实现相同目标的方法是:伸缩盒。 将容器设置为列伸缩框，然后您可以自由地允许某些元素具有固定大小(默认行为)或填充/收缩容器空间(使用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;
谢谢，我在你的帮助下解决了我的问题，稍微调整了一下，因为我想要一个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;
}
注意显示:块;视频标签。
对于一个不同的方法，你可以使用列表中的一些东西:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
只要父容器有position: relative;
