我已经在其他几个背景下看过这个问题了,但我认为值得再次询问我的具体案例.我正在尝试创建一些可重用的CSS类,以便在我的网站上实现更高的一致性和更少的混乱,而且我一直试图标准化我经常使用的一件事.
我有一个容器div,我不想设置它的高度(因为它会根据网站的位置而有所不同),里面是一个标题div,然后是一个无序的项目列表,所有这些都是CSS适用于他们.看起来很像这样:
我希望无序列表占用容器div中剩余的空间,知道标题div是18px高.我只是不知道如何将列表的高度指定为"100%减去18px的结果".有没有人在这种情况下有任何建议？
我意识到这是一篇很老的帖子,但鉴于它没有被建议,值得一提的是,如果你正在编写符合CSS3标准的浏览器,你可以使用calc:
height: calc(100% - 18px);
这是值得的注意的是并不是所有的浏览器目前支持CSS3标准计算()函数,因此实现浏览器功能的特定版本可能需要如下所示:
/* 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);
}
然后我绑定窗口调整大小以重新调整浏览器窗口大小(如果容器的大小更改与窗口调整大小)
$(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;
京公网安备 11010802040832号 | 京ICP备19059560号-6 