大佬教程收集整理的这篇文章主要介绍了CSS3高度：calc(100％)不工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
(我想这样做的原因是,我有一些基于一些不同标准的动态高度的元素,例如,根据可以包含的不同元素,头的高度变化,然后需要拉伸以填充剩余的可用可用空间.)
然而,div元素保持内容的高度 – 看起来好像它将100％解释为body元素的高度.
HTML：
<header>Some nav stuff here</header> <h1>This is the heading</h1> <div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>
CSS：
body {BACkground: blue; height:100%;position:relative;} header {BACkground: red; height: 20px; width:100%} h1 {font-size:1.2em; margin:0; padding:0; height: 30px; font-weight: bold; BACkground:yellow} #theCalcDiv {BACkground:green; height: calc(100% - (20px + 30px + 20pX)); display:block}
见小提琴：http://jsfiddle.net/ElizabethMeyer/UF3mb/.
我会感谢任何帮助或指向正确的方向.
以下CSS作品：
html,body { BACkground: blue; height:100%; padding:0; margin:0; } header { BACkground: red; height: 20px; width:100% } h1 { font-size:1.2em; margin:0; padding:0; height: 30px; font-weight: bold; BACkground:yellow } #theCalcDiv { BACkground:green; height: -moz-calc(100% - (20px + 30pX)); height: -webkit-calc(100% - (20px + 30pX)); height: calc(100% - (20px + 30pX)); display:block }
我还将html和body上的margin / padding设置为0,否则在添加时会有一个滚动条.
这是一个更新的小提琴
浏览器支持是：IE9,Firefox 16以及厂商前缀Firefox 4,Chrome 19,Safari 6
以上是大佬教程为你收集整理的CSS3高度：calc(100％)不工作全部内容，希望文章能够帮你解决CSS3高度：calc(100％)不工作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。