calc() not working in Firefox

久未见 提交于 2020-07-08 10:58:13

问题


I am trying to use calc() to get my page contents to fit on the page perfectly. I have a header with a height of 52px. I am trying to make a container 100% of the page -50px to it fits onto the page perfectly, however as it does work in Chrome, Edge, and Internet Explorer, it doesn't in Firefox.

Chrome: Chrome result

Firefox: Firefox result

div#container {

	width: 20%;

	height: 100%;

	height: calc(100% - 52px);

	height: -moz-calc(100% - 52px);

	height: -webkit-calc(100% - 52px);

	float: left;

}
<div id="container"></div>

回答1:


Turns out I need to set the height of the body to 100% for it to take effect. Just thought I would let other users know in case they come across the same problem.

html,
body {
	height: 100%;
}


来源:https://stackoverflow.com/questions/43029822/calc-not-working-in-firefox

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!