我已经为此寻找了很多答案和技巧,但对我来说没有任何效果.
一些简报:该项目有一个主页,有5个部分(关于我们,活动,联系等...).每个部分的高度必须至少为100%.这意味着如果孩子的容量是"小",那么该部分的高度必须为100%(此处屏幕分辨率有效).但是如果孩子的容器是"大"的,那么带有bg-color类的div和该部分必须扩展到超过100%的高度,以便它可以包含所有内容.每个部分都有不同的背景图像,我使用bg-color在背景图像上添加透明色.
html结构看起来像这样
<section class="each-page about-us">
<div class="bg-color">
<div class="container page-content">
...CONTENT...
</div>
</div>
</section>
<section class="each-page activities">
<div class="bg-color">
<div class="container page-content">
...CONTENT...
</div>
</div>
</section>
<section class="each-page work-with-us">
<div class="bg-color">
<div class="container page-content">
...CONTENT...
</div>
</div>
</section>
css看起来像这样:
body, html {
height: 100%;
width: 100%;
}
.about-us {
background-image: url("../images/bb2.jpg");
}
.each-page {
border-top: 1px solid #fff;
height: 100%;
}
.bg-color {
background-color: rgba(35, 124, 170, 0.6);
height: 100%;
width: 100%;
}
一些带有类容器页面内容的div有很多内容.但由于父div的高度为100%,因此该内容覆盖了底部的部分并且非常难看.特别是当我在低分辨率屏幕上测试时,几乎每个部分都显得破碎!我不想用滚动条设置溢出.
有什么建议/解决方案吗？由于该项目将是移动友好型(引导程序),因此响应式解决方案将是最佳选择.
先感谢您.
你可以通过使用视图高度单位来实现它vh,在小提琴中你可以看到每个.sectiondiv至少有完整的高度,请参阅第3节有很多内容所以它有更多的高度
.each-page {
border-top: 1px solid #fff;
min-height: 100vh;
}
更新1:
为了解决Safari版本较少的问题8- 因为Safari 8 + 支持视图单元 - 您只需将其添加到您的javascript:
var UA = navigator.userAgent,
Ver = parseInt(navigator.appVersion,10);
if (UA.indexOf("Safari")!=-1 && Ver < 8) {
// it is safari and version less than 8;
// use javascript to fix it.
$('.each-page').css({'min-height': $(window).height()});
}
这就是JS Fiddle 2,在Safari上测试过5.1.7
| 归档时间： |
|
| 查看次数： |
147 次 |
| 最近记录： |