设置宽度/高度为百分比减去像素

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

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

它看起来很像这样:

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

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

当前回答

假设头部高度为17px

css列表:

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

头css:

height: 17px;
float: left;
width: 100%;

其他回答

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

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

只要父容器有position: relative;

我用Jquery来做这个

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

然后我绑定窗口调整大小，每当浏览器窗口调整大小时(如果容器的大小随窗口调整大小而改变)

$(window).resize(function() { setSizes(); });

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

我不确定这是否在您的特定情况下工作，但我发现，如果包含div是固定大小，内div的填充将推动内容在div内部。你必须浮动或绝对定位你的头元素，但除此之外，我还没有尝试过这种可变大小的div。

在要减去像素的元素上使用负边距。(所需的元素) 使溢出:隐藏;在包含元素上溢出开关:自动;在所需元素上。

这对我很管用!

推荐文章