我试图在我的网站上创建一些可重用的CSS类,以获得更多的一致性和更少的混乱,我坚持试图标准化我经常使用的一件事。

我有一个容器<div>,我不想设置高度(因为它将取决于它在网站上的位置),里面是一个标题<div>,然后是一个无序的项目列表,所有与CSS应用到他们。

它看起来很像这样:

我想让无序列表占据容器<div>的剩余空间,知道标题<div>是18px高。我只是不知道如何将列表的高度指定为“100% - 18px的结果”。

我在其他一些关于SO的上下文中看到过这个问题,但我认为对于我的特殊情况,值得再问一次。在这种情况下,有人有什么建议吗?


当前回答

不要将高度定义为百分比,只需设置top=0和bottom=0,如下所示:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

其他回答

对于一个不同的方法,你可以使用列表中的一些东西:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

只要父容器有position: relative;

不要将高度定义为百分比,只需设置top=0和bottom=0,如下所示:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

假设头部高度为17px

css列表:

height: 100%;
padding-top: 17px;

头css:

height: 17px;
float: left;
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);

另一种实现相同目标的方法是:伸缩盒。 将容器设置为列伸缩框,然后您可以自由地允许某些元素具有固定大小(默认行为)或填充/收缩容器空间(使用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;