CSS：将宽度/高度设置为百分比减去像素
CSS：将宽度/高度设置为百分比减去像素
我正在尝试创建一些可重用的CSS类，以便在我的网站上实现更高的一致性和更少的混乱，而且我一直试图标准化我经常使用的一件事。
我有一个容器<div>，我不想设置高度（因为它会根据网站的位置而有所不同），里面是一个标题<div>，然后是一个无序的项目列表，所有的CSS都应用于他们。
我想无序列表占用容器中剩余的房间<div>，知道头部<div>是18px高大的。我只是不知道如何将列表的高度指定为“ 100%减去的结果18px”。
我已经在其他几个背景下看过这个问题了，但我认为值得再次询问我的具体案例。有没有人在这种情况下有任何建议？
翻翻过去那场雪浏览 1714回答 3
3回答
-
潇湘沐
我意识到这是一篇旧帖子，但鉴于它没有被建议，值得一提的是，如果您正在为符合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); -
芜湖不芜
我在你的帮助下解决了我的问题，调整了一点，因为我想要一个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;视频标签。
随时随地看视频慕课网APP
Html/CSS