Question

我正在尝试创建一些可重复使用的CSS类，以便在我的网站上实现更高的一致性和更少的混乱，而且我一直试图标准化我经常使用的一件事。

我有一个容器<div>，我不想设置它的高度（因为它会根据网站的位置而有所不同），里面是一个标题<div>，然后是一个无序列表项目，所有项目都应用了CSS。

看起来很像这样：

Widget

我希望无序列表占用容器<div>中的剩余空间，因为知道标题<div>高18px。我只是不知道如何将列表的高度指定为“100%减去18px”的结果。

我已经在其他几个背景下看过这个问题了，但我认为值得再次询问我的具体案例。在这种情况下有没有人有任何建议？

Answer 1

我意识到这是一篇很老的帖子，但鉴于它没有被建议，值得一提的是，如果你正在编写符合CSS3标准的浏览器，你可以使用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);

Answer 2

对于一些不同的方法，你可以在列表中使用这样的东西：

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

只要父容器具有position: relative;

，这就有效

Answer 3

我将Jquery用于此

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

然后我绑定窗口调整大小以重新调整浏览器窗口的大小（如果容器的大小随窗口调整大小而改变）

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

Answer 4

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

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

Answer 5

假设17px标题高度

列出css：

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

标题css：

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

Answer 6

在您想要减去像素的元素上使用负边距。（所需元素）
在包含元素

overflow:hidden;

切换到所需元素的overflow:auto;。

它对我有用！

Answer 7

尝试使用大小调整框。列表：

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;

Answer 8

我尝试了其他一些答案，但没有一个能够完全按照我的要求行事。我们的情况非常相似，我们有一个窗口标题，窗口可以调整窗体中的图像。我们想要锁定调整大小的宽高比，而不需要添加计算来考虑标题的固定大小，并且仍然让图像填充窗体。

下面我创建了一个非常简单的代码段，其中显示了我们最终做的事情似乎适用于我们的情况，并且应该兼容大多数浏览器。

在我们的窗口元素上，我们添加了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>

Answer 9

谢谢，我在你的帮助下解决了我的问题，调整了一点，因为我想要一个100％宽度100％高度（底部条的高度较少）并且身体没有滚动（没有黑客/隐藏滚动条）。 / p>

对于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.adjusted的值设置为底部比底部高度更高，否则出现垂直滚动条，我调整为最接近的值。

这种差异是因为动态区域中的一个元素正在添加一个额外的底洞，我不知道如何摆脱...它是一个视频标签（HTML5），请注意我把那个视频标签这个css（因此没有理由它制作一个底洞，但确实如此）：

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

目标：有一个视频占用100％的浏览器（并在浏览器调整大小时动态调整大小，但不改变宽高比）减去我用于带有一些文本，按钮等的div的底部空间（当然还有验证员w3c＆amp; css）。

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

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

请注意视频代码上的display:block;。

Answer 10

实现同一目标的另一种方法：柔性盒。将容器设为一列弹性框，然后您就可以自由地允许某些元素具有固定大小（默认行为）或填充/缩小到容器空间（使用flex-grow：1和flex-缩小：1）。

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

请参见https://jsfiddle.net/2Lmodwxk/ （尝试扩大或缩小窗口以注意到效果）

注意：您还可以使用简写属性：

   flex:1 1 auto;

Answer 11

我不确定这是否适用于您的特定情况，但我发现如果包含的div是固定大小，内部div上的填充将推送div内部的内容。你必须浮动或绝对定位你的标题元素，否则，我没有尝试过这个可变大小的div。

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

11 个答案: