是否有跨浏览器的高度的解决方案：calc（100％-70px） [英] Is there a cross-browser solution to height: calc(100%-70px)

问题描述

确定要使用这个吗？我如何为旧版浏览器确保其安全性？

  height：-moz-calc（100％ -  70px）; 
 height：-webkit-calc（100％ -  70px）; 
 height：calc（100％ -  70px）; 
  

以下是我要完成的工作。

1. 全宽/固定高度头


2. 一个滑块，宽度和全高分别为。
   
3. 在滑块中垂直和水平居中的标题块


4. 控件块始终距底部固定高度




这是我迄今为止所能达到的效果的图片。它是ALMOST完美，除了上面的粗体部分。








如果我添加填充或边距，它会将滑块高度扩展到100％获取滚动条。使用上面的高度计算似乎可以解决它，但从我的理解， calc（）与IE 7，IE 8，iOS 5或更低版本或Android不兼容。





这个问题？





这是我的 HTML ：

 < div class =header> 
< h1>标题 - 全宽+ 70px高度< / h1> 
< / div> 
 
< div class =slider> 
< div class =headline> 
< div class =headline-container><！ -  for table-cell vertical centering  - > 
< h1>标题栏< / h1> 
< p>中心水平& amp;在滑块中垂直< / p> 
< / div> 
< / div> 
 
< div class =controls> 
< h2>控制 - 以水平为中心& amp;距容器底部40像素< / h2> 
< / div> 
< / div> 
  

这是我的 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; 
} 
  

最后，我做了一个小提琴，以防你想玩它。感谢您的帮助！

解决方案

我不喜欢JavaScript函数来处理HTML元素的大小调整/调整大小，唯一可能的方式。





您可以尝试使用表格结构，设置：






• height：100％到表格本身;


• height：< what you want> / code>到表格标题（第一行）;


• height：auto >
  




它应该作为 fill-parent 指令工作。





希望它帮助！ ：）




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!

解决方案

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! :)

这篇关于是否有跨浏览器的高度的解决方案：calc（100％-70px）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！