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