代码之家 › 专栏 › 技术社区 › Matt Anxo P

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

pixels height css

423

Matt Anxo P · 技术社区 · 14 年前

我在其他场合也看到过这样的问题,但我认为对于我的特殊情况,值得再问一次。我正在尝试创建一些可重用的css类,以便在我的站点上实现更高的一致性和更少的混乱,并且我一直在尝试将一个我经常使用的东西标准化。

我有一个容器div,我不想为它设置高度(因为它会根据站点的位置而变化),其中有一个header div,然后是一个无序的项列表,所有这些项都应用了css。看起来很像这样:

Widget

我希望无序列表占据容器div中剩余的空间,知道header div是18px高。我只是不知道如何将列表的高度指定为“100%减去18px的结果”。在这种情况下有人有什么建议吗?

11 回复 | 直到 6 年前

789

Frederik Struck-Schøning 7 年前

我意识到这是一篇老文章,但考虑到还没有人建议这么做,值得一提的是,如果您是为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);

Mikhail 12 年前

对于一些不同的方法,您可以使用列表中的类似内容:

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

只要父容器有 position: relative;

puffpio 14 年前

我用jquery做这个

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

然后我将窗口大小绑定到每当调整浏览器窗口大小时重新计算它(如果容器的大小随窗口大小而改变)

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

kaleazy 12 年前

不要将高度定义为百分比,只需设置 top=0 和 bottom=0 ,像这样:

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

ghoppe 14 年前

假设17px割台高度

列表CSS:

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

标题CSS:

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

desbest 13 年前

在要减去像素的元素上使用负边距。(所需元素)
制作 overflow:hidden; 关于包含元素
切换到 overflow:auto; 在所需元素上。

它对我有用!

Mikaël Mayer 10 年前

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

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;

TJ Rockefeller 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>

Claudio 8 年前

谢谢,我在你的帮助下解决了我的问题,稍微调整了一下,因为我想要一个100%宽100%高的div(一个底部条的高度较低)和没有滚动体(没有黑客/隐藏滚动条)。

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%的空间(在调整浏览器大小时动态调整大小,但不改变纵横比)减去一个底部空间,我用这个空间来划分一些文本、按钮等(当然还有w3c&css验证器)。

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

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

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

tarulen 6 年前

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

dclowd9901 14 年前

我不确定这是否适用于您的特定情况,但我发现如果包含的div是固定大小的,那么div内部的填充将推动div内部的内容。您必须浮动或绝对定位头元素,否则,我还没有尝试过对可变大小div执行此操作。