546

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

我有一个<div>我不想为其设置高度的容器（因为它会根据它在站点上的位置而有所不同），并且在它内部是一个 header <div>，然后是一个无序列表的项目，所有这些都应用了 CSS他们。

它看起来很像这样：

小部件

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

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

4

11 回答 11

1029

您可以使用calc：

height: calc(100% - 18px);

请注意，一些旧浏览器不支持 CSS3calc()功能，因此可能需要实现该功能的供应商特定版本：

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
于 2012-12-31T12:12:08.083 回答
73

对于一些不同的方法，您可以在列表中使用类似这样的方法：

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

只要父容器有position: relative;

于 2011-03-30T14:03:28.370 回答
25

我为此使用 Jquery

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

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

$(window).resize(function() { setSizes(); });
于 2010-03-12T18:56:05.577 回答
15

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

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}
于 2012-08-01T17:16:12.993 回答
8

假设 17px 标题高度

列出 CSS：

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

标题CSS：

height: 17px;
float: left;
width: 100%;
于 2010-03-12T19:03:15.043 回答
7
  1. 在要减去像素的元素上使用负边距。（所需元素）
  2. overflow:hidden;在包含元素上制作
  3. 切换到overflow:auto;所需的元素。

它对我有用！

于 2011-08-30T15:03:48.973 回答
5

试试盒子大小。对于列表：

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;
于 2014-05-21T09:02:31.040 回答
3

实现相同目标的另一种方法：弹性盒子。使容器成为列弹性盒，然后您可以自由地允许某些元素具有固定大小（默认行为）或填充/缩小到容器空间（使用 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;
于 2018-06-24T22:12:42.383 回答
2

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

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

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

于 2016-04-28T14:00:23.910 回答
1

谢谢，我在你的帮助下解决了我的问题，稍微调整了一下，因为我想要一个 div 100% 宽度 100% 高度（底部栏的高度更小）并且身体上没有滚动（没有黑客/隐藏滚动条）。

对于 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 & css 当然）。

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

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

注意display:block;视频标签。

于 2016-05-13T11:56:33.797 回答
0

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

于 2010-03-12T19:05:26.147 回答