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

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

我有一个容器<div>，我不想为它设置高度(因为它会根据它在网站上的位置而变化)，里面是一个标题<div>，然后是一个无序列表的项目，所有的CSS应用到它们。

它看起来很像这样:

Widget

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

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

487713 次浏览
小开

我用Jquery来做这个

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

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

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

假设头部高度为17px

css列表:

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

头css:

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

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

小开

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

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

只要父容器有position: relative;，这就可以工作

小开
  1. 在要减去像素的元素上使用负边距。(所需的元素)
  2. 在包含元素上设置overflow:hidden;
  3. 在所需元素上切换到overflow:auto;。

这对我很管用!

小开

不要将高度定义为百分比，只需设置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;
小开

我尝试了一些其他的答案，没有一个像我想要的那样有效。我们的情况非常类似，我们有一个窗口标题，窗口可以通过窗口主体中的图像调整大小。我们想要锁定调整大小的纵横比，而不需要添加计算来考虑头部的固定大小，并且仍然让图像填充窗口体。

下面我创建了一个非常简单的代码片段，展示了我们最终所做的事情，它似乎很适合我们的情况，并且应该与大多数浏览器兼容。

在我们的窗口元素上，我们添加了一个20px的边距，这有助于相对于屏幕上的其他元素的定位，但不影响窗口的“大小”。然后，窗口标题被绝对定位(这将它从其他元素流中移除，因此它不会导致无序列表等其他元素被移动)，它的顶部被定位为-20px，这将标题放置在窗口的边缘。最后，我们的ul元素被添加到窗口中，高度可以设置为100%，这将使它填充窗口的主体(不包括边缘)。

. 
*,*: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>

小开

谢谢，我在你的帮助下解决了我的问题，稍微调整了一下，因为我想要一个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%的浏览器(并动态调整大小时浏览器是调整大小，但不改变纵横比)少一个底部空间，我使用一个div与一些文本，按钮等(和验证器w3c &当然是CSS)。

编辑:我找到了原因，视频标签就像文本，不是一个块元素，所以我用这个css修复了它:

 video{
display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}

注意视频标签上的display:block;。

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

提交答案