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

CSS: Setting width/height as Percentage minus pixels

提问by MegaMatt

I'm trying to create some re-usable CSS classes for more consistency and less clutter on my site, and I'm stuck on trying to standardize one thing I use frequently.

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

I have a container <div>that I don't want to set the height for (because it will vary depending on where on the site it is), and inside it is a header <div>, and then an unordered listof items, all with CSS applied to them.

我有一个容器<div>，我不想为其设置高度（因为它会因网站上的位置而异），里面有一个 header <div>，然后是一个无序列表的项目，所有这些都应用了 CSS他们。

It looks a lot like this:

它看起来很像这样：

I want the unordered listto take up the remaining room in the container <div>, knowing that the header <div>is 18pxtall. I just don't know how to specify the list's height as "the result of 100%minus 18px".

我想无序列表占用容器中剩余的房间<div>，知道头部<div>是18px高大的。我只是不知道如何将列表的高度指定为“100%减号的结果18px”。

I've seen this question asked in a couple other contexts on SO, but I thought it would be worth asking again for my particular case. Does anyone have any advice in this situation?

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

回答by Levi Botelho

I realise this is an old post, but given that it hasn't been suggested it is worth mentioning that if you are writing for CSS3-compliant browsers, you can use calc:

我意识到这是一篇旧帖子，但鉴于尚未提出建议，值得一提的是，如果您正在为兼容 CSS3 的浏览器编写代码，则可以使用calc：

height: calc(100% - 18px);

It's worth it to note that not all browsers currently support the standard CSS3 calc() function, so implementing the browser specific versions of the function may be required like the following:

值得注意的是，目前并非所有浏览器都支持标准的 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);

回答by Nicolas Galler

For a bit of a different approach you could use something like this on the list:

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

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

This works as long as the parent container has position: relative;

只要父容器有 position: relative;

回答by puffpio

I use Jquery for this

我为此使用 Jquery

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

then I bind the window resize to recalc it whenever the browser window is resized (if container's size changed with window resize)

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

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

回答by kaleazy

Don't define the height as a percent, just set the top=0and bottom=0, like this:

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

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

回答by ghoppe

Presuming 17px header height

假设 17px 标题高度

List css:

列表CSS：

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

Header css:

标题CSS：

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

回答by desbest

1. Use negative margins on the element you would like to minus pixels off. (desired element)
2. Make overflow:hidden;on the containing element
3. Switch to overflow:auto;on the desired element.

1. 在要减去像素的元素上使用负边距。（所需元素）
2. 使overflow:hidden;包含的元素上
3. 切换到overflow:auto;所需元素。

It worked for me!

它对我有用！

回答by Light

Try box-sizing. For the list:

试试盒子尺寸。对于列表：

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;

For the header:

对于标题：

position: absolute;
left: 0;
top: 0;
height: 10px;

Of course, the parent container should has something like:

当然，父容器应该有类似的东西：

position: relative;

回答by TJ Rockefeller

I tried some of the other answers, and none of them worked quite how I wanted them to. Our situation was very similar where we had a window header and the window was resizable with images in the window body. We wanted to lock the aspect ratio of the resizing without needing to add in calculations to account for the fixed size of the header and still have the image fill the window body.

我尝试了其他一些答案，但没有一个像我希望的那样工作。我们的情况非常相似，我们有一个窗口标题，并且窗口可以通过窗口主体中的图像调整大小。我们希望锁定调整大小的纵横比，而无需添加计算以解决标题的固定大小，并且仍然让图像填充窗口主体。

Below I created a very simple snippet that shows what we ended up doing that seems to work well for our situation and should be compatible across most browsers.

下面我创建了一个非常简单的代码段，它显示了我们最终做的似乎对我们的情况很有效并且应该在大多数浏览器中兼容。

On our window element we added a 20px margin which contributes to positioning relative to other elements on the screen, but does not contribute to the "size" of the window. The window-header is then positioned absolutely (which removes it from the flow of other elements, so it won't cause other elements like the unordered list to be shifted) and its top is positioned -20px which places the header inside of the margin of the window. Finally our ul element is added to the window, and the height can be set to 100% which will cause it to fill the window's body (excluding the margin).

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

回答by tarulen

Another way to achieve the same goal: flex boxes. Make the container a column flex box, and then you have all freedom to allow some elements to have fixed-size (default behavior) or to fill-up/shrink-down to the container space (with flex-grow:1 and flex-shrink:1).

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

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

See https://jsfiddle.net/2Lmodwxk/(try to extend or reduce the window to notice the effect)

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

Note: you may also use the shorthand property:

注意：您也可以使用速记属性：

   flex:1 1 auto;

回答by Claudio

Thanks, i solved mine with your help, tweaking it a little since i want a div 100% width 100% heigth (less height of a bottom bar) and no scroll on body (without hack / hiding scroll bars).

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

For CSS:

对于 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;
}

For HTML:

对于 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>  

That did the trick, oh yes i put a value little greatter on div.adjusted for bottom than for bottom bar height, else the vertical scrollbar appears, i adjusted to be the nearest value.

这就是诀窍，哦，是的，我在 div.adjusted 上为底部设置了一个比底部栏高度更大的值，否则会出现垂直滚动条，我将其调整为最接近的值。

That difference is because one of the elements on dynamic area is adding an extra bottom hole that i do not know how to get rid of... it is a video tag (HTML5), please note i put that video tag with this css (so there is no reason for it to make a bottom hole, but it does):

这种区别是因为动态区域上的元素之一是添加了一个额外的底部孔，我不知道如何摆脱它......它是一个视频标签（HTML5），请注意我将该视频标签与此 css 一起放置（所以没有理由打底孔，但确实如此）：

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

The objetive: Have a video that takes the 100% of the brower (and resizes dynamically when browser is resized, but without altering the aspect ratio) less a bottom space that i use for a div with some texts, buttons, etc (and validators w3c & css of course).

目标：有一个视频，它占用浏览器的 100%（并在调整浏览器大小时动态调整大小，但不改变纵横比）减去我用于带有一些文本、按钮等（和验证器）的 div 的底部空间w3c 和 css 当然）。

EDIT: I found the reason, video tag is like text, not a block element, so i fixed it with this css:

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

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

Note the display:block;on video tag.

注意display:block;视频标签。