可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I have a div that I want to fill the whole height of the body less a set number in pixels. But I can't get height: calc(100% - 50px) to work.
(The reason I want to do this is I have elements that have dynamic heights based on some varying criteria, e.g. height of the header changes based on different elements it can contain. A content div then needs to stretch to fill the rest of the available space available.)
The div element however stays the height of the content - it doesn't seem as if it interprets 100% to be the height of the body element.
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}
See fiddle: http://jsfiddle.net/ElizabethMeyer/UF3mb/.
I would appreciate any help or pointers in the right direction.
回答1:
You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc.
Following CSS works:
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 }
I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.
Here's an updated fiddle
http://jsfiddle.net/UF3mb/10/
Browser support is: IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+
回答2:
First off - check with Firebug(or what ever your preference is) whether the css property is being interpreted by the browser. Sometimes the tool used will give you the problem right there, so no more hunting.
Second off - check compatibility: http://caniuse.com/#feat=calc
And third - I ran into some problems a few hours ago and just resolved it. It's the smallest thing but it kept me busy for 30 minutes.
Here's how my CSS looked
#someElement { height:calc(100%-100px); height:-moz-calc(100%-100px); height:-webkit-calc(100%-100px); }
Looks right doesn't it? WRONG Here's how it should look:
#someElement { height:calc(100% - 100px); height:-moz-calc(100% - 100px); height:-webkit-calc(100% - 100px); }
Looks the same right?
Notice the spaces!!! Checked android browser, Firefox for android, Chrome for android, Chrome and Firefox for Windows and Internet Explorer 11. All of them ignored the CSS if there were no spaces.
Hope this helps someone.
回答3:
try setting both html and body to height 100%;
html, body {background: blue; height:100%;}
回答4:
All the parent elements in the hierarchy should have height 100%. Just give max-height:100% to the element and max-height:calc(100% - 90px) to the immediate parent element.
It worked for me on IE also.
html, body { height: 100% } parent-element { max-height: calc(100% - 90px); } element { height:100%; }
The Rendering in IE fails due to failure of Calc when the window is resized or data loaded in DOM. But this method mentioned above worked for me even in IE.
回答5:
You don't need to calculate anything, and probably shouldn't:
<!DOCTYPE html> <head> <style type="text/css"> body {background: blue; height:100%;} 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-color:green; padding-bottom: 100%} </style> </head> <body> <header>Some nav stuff here</header> <h1>This is the heading</h1> <div class="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements. </div>
I stuck it all together for brevity.
回答6:
If you are styling calc in a GWT project, its parser might not parse calc for you as it did not for me... the solution is to wrap it in a css literal like this:
height: literal("-moz-calc(100% - (20px + 30px))"); height: literal("-webkit-calc(100% - (20px + 30px))"); height: literal("calc(100% - (20px + 30px))");
回答7:
Calc is well supported now and the addition of viewport units makes this easier as well. The solution below using vh units should work well, you can set the body to height auto, just ensure theCalcDiv is display: block
body {background: blue; height:100%;} 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; min-height:calc(100vh - (20px + 30px)); display:block}
