CSS：设置宽度/高度为百分比减去像素
我已经在其他情况下看到了这个问题，但是我认为值得再问一次我的具体情况。 我正在尝试创build一些可重用的CSS类，以便在我的网站上实现更一致和更less的混乱，并且我试图将我经常使用的一件事情标准化。
我有一个容器div，我不想为高度设置（因为它会根据网站的位置而有所不同），里面是一个头div，然后是一个无序的项目列表，所有的CSS适用于他们。 它看起来很像这样：
我想要无序列表占用容器div中的剩余空间，知道标题div是18px高。 我只是不知道如何指定列表的高度为“100％减去18px的结果”。 有没有人在这种情况下有任何build议？
我意识到这是一个旧的post，但由于没有build议，值得一提的是，如果你正在写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);
对于一些不同的方法，你可以在列表中使用类似的东西：
position: absolute; top: 18px; bottom: 0px; width: 100%;
只要父容器具有position: relative;
我为此使用Jquery
function setSizes() { var containerHeight = $("#listContainer").height(); $("#myList").height(containerHeight - 18); }
然后我绑定窗口resize来重新调整浏览器窗口的大小（如果容器的大小改变窗口大小）
$(window).resize(function() { setSizes(); });
不要将高度定义为百分比，只需设置top=0和bottom=0 ，如下所示：
#div { top: 0; bottom: 0; position: absolute; width: 100%; }
假设17px标题高度
列表css：
height: 100%; padding-top: 17px;
标题css：
height: 17px; float: left; width: 100%;
- 在您希望减去像素的元素上使用负边距。 （期望的要素）
- 使
overflow:hidden;在包含元素上 - 切换到
overflow:auto;在期望的元素上。
它为我工作！
尝试框大小。 对于清单：
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;
我尝试了一些其他的答案，而且他们中的任何一个都不是我想要的。 我们的情况非常相似，我们有一个窗口标题，窗口的大小可以通过窗体中的图像调整。 我们想要lockingresize的宽高比，而不需要在计算中join以考虑头部的固定大小，并且仍然将图像填充到窗体中。
下面我创build了一个非常简单的代码片断，显示我们最终做了什么，似乎适合我们的情况，并且应该在大多数浏览器中兼容。
在我们的窗口元素上，我们添加了一个20px的边距，这个边距有助于相对于屏幕上的其他元素进行定位，但是并不影响窗口的大小。 然后，窗口标题被绝对定位（将其从其他元素的stream中移除，因此不会像无序列表那样移动其他元素），并且其顶部被定位为-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％heigth（低底部栏高度）和身体上没有滚动（没有黑客/隐藏滚动条）。
对于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底部栏高度比较小伟大，否则垂直滚动条出现，我调整为最接近的价值。
这是因为dynamic区域上的元素之一是添加额外的底部洞，我不知道如何摆脱…这是一个video标签（HTML5），请注意我把这个video标签与这个CSS（所以没有理由做一个底孔，但它确实）：
video{ width:100%;height:100%;margin:0px;border:0px;padding:0px; }
目标：有一个video，占用浏览器的100％（和浏览器resize，但不改变宽高比dynamicresize）底部空间，我用一个文本，button等div（和validation器w3c＆css当然）。
编辑：我发现原因，video标签是像文本，而不是块元素，所以我用这个CSS固定它：
video{ display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px; }
注意display:block; video标签上。
我不知道这是否在你的特定情况下工作，但我发现内部div的填充将推动div内的内容，如果包含div是一个固定的大小。 你将不得不漂浮或绝对位置你的头元素，但否则，我没有尝试过这个可变大小的div。
