Is there a cross-browser solution to height: calc(

Question

Is it ok yet to use this? How do I bullet proof it for older browsers?

height: -moz-calc(100% - 70px);
height: -webkit-calc(100% - 70px);
height: calc(100% - 70px);

Here is specifically what I'm trying to accomplish.

1. A Full Width / Fixed Height Header
2. A Slider that stretches full width and full height - minus the height of the header.
3. A headline block that is centered vertically and horizontally in the slider
4. A Controls block that is always a fixed height from the bottom of the slider

Here's an image of what I have been able to achieve so far. It's ALMOST perfect, except for the part in bold above. The slider (black area) currently stretches 100% height and flows behind the header, which isn't ok for images.

If I add padding or margin, it extends the slider height beyond 100% and I get a scrollbar. Using the height calculation above seems to fix it, but from my understanding, calc() isn't compatible with IE 7, IE 8, iOS 5 or lower, or Android.

Is there a better fix for this problem? jQuery is ok, but I'd prefer a CSS solution if one exists.

Here's my HTML:

<div class="header">
    <h1>Header - Full Width + 70px Height</h1>
</div>

<div class="slider">
    <div class="headline">
        <div class="headline-container"><!-- for table-cell vertical centering -->
           <h1>Headline Block</h1>
            <p>Centered Horizontally &amp; Vertically in the Slider Block</p>
       </div>
    </div>

    <div class="controls">
        <h2>Controls - Centered Horizontally &amp; 40px from bottom of container</h2>
    </div>
</div>

Here's my CSS:

html, body {
    width: 100%;
    height: 100%;
    margin: 0; padding: 0;
}

h1, h2, p {
    margin: 0;
    padding: 0;
}

.header {
  position: absolute;
  width: 100%;
  height: 70px;
  background-color: #888;
  z-index: 9999;
}

.header h1 {
  color: #fff;
  text-align: center;
}

.slider-desc {
    color: #fff;
    text-align: center;
    margin: 15px 0 0;
}

.slider {
  width: 100%;
  height: 100%;
  background-color: #000;
}

.headline {
    display: table;
    width: 100%;
    height: 100%;
}

.headline-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.headline-container h1, .headline-container p {
    background-color: #fff;
}

.controls {
  position: absolute;
  width: 100%;
  bottom: 40px;
  text-align: center;
  background-color: yellow;
}

Finally, I made a fiddle in case you want to play around with it. Thanks for the help!

Answer 1

I don't like JavaScript functions to handle sizing/resizing of my HTML elements, but sometimes it's the only possible way.

You could try with a tabular structure, setting:

• height: 100% to the table itself;
• height: <what you want> to the table header (first row);
• height: auto to the table content.

It should work as a fill-parent directive.

Hope it helps! :)

Answer 2

A simple vanilla JS piece could work for this (jQuery is too much of a hassle to load for such a small task):

document.getElementsByClassName("slider")[0].style.height = window.innerHeight - 70;

And obviously you need to position it 70px from the top.
Also remember to listen for window resize:

window.onresize = function () {
    // Code above
}

---

If you really want jQuery,

$(".slider").height($(document).height() - 70);
$(window).resize(function () {
    // Code above
});

Answer 3

Calc() is not supported by older browsers, such as IE7 or IE8, but can be emulated in older versions of IE using the non-standard expression() syntax.

Check out the browser support here: http://caniuse.com/calc

Answer 4

I'm a little late to this party, but for anyone looking for a way to get calc() into IE8, there isn't really any alternative to a polyfill. Microsoft removed support for the non-standard expression() statement:

Important Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher. This decision was made for standards compliance, browser performance, and security reasons.

Source here

This polyfill is tested in IE8

<musing> I'm not entirely sure why MS decided for performance and 'security reasons' to remove the expression statement from IE8, they never really seemed to be concerned with performance before. Of course, it wouldn't even be an issue if they didn't make it necessary for organisations to build apps specifically for and reliant on it. You'd have thought they would have learned their lesson with IE6. Elaboration would be good.</musing>