问题描述
确定要使用这个吗?我如何为旧版浏览器确保其安全性?
height:-moz-calc(100% - 70px);
height:-webkit-calc(100% - 70px);
height:calc(100% - 70px);
以下是我要完成的工作。
- 全宽/固定高度头
- 一个滑块,宽度和全高分别为。
- 在滑块中垂直和水平居中的标题块
- 控件块始终距底部固定高度
-
height:100%
到表格本身; -
height:< what you want> / code>到表格标题(第一行);
-
height:auto
>
- A Full Width / Fixed Height Header
- A Slider that stretches full width and full height - minus the height of the header.
- A headline block that is centered vertically and horizontally in the slider
- A Controls block that is always a fixed height from the bottom of the slider
height: 100%
to the table itself;height: <what you want>
to the table header (first row);height: auto
to the table content.
这是我迄今为止所能达到的效果的图片。它是ALMOST完美,除了上面的粗体部分。
如果我添加填充或边距,它会将滑块高度扩展到100%获取滚动条。使用上面的高度计算似乎可以解决它,但从我的理解,
这个问题?
这是我的 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元素的大小调整/调整大小,唯一可能的方式。
您可以尝试使用表格结构,设置:
它应该作为 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.
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 & Vertically in the Slider Block</p>
</div>
</div>
<div class="controls">
<h2>Controls - Centered Horizontally & 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:
It should work as a fill-parent
directive.
Hope it helps! :)
这篇关于是否有跨浏览器的高度的解决方案:calc(100%-70px)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!