每个部分的高度必须至少为100%

我已经为此寻找了很多答案和技巧,但对我来说没有任何效果.

一些简报:该项目有一个主页,有5个部分(关于我们,活动,联系等...).每个部分的高度必须至少为100%.这意味着如果孩子的容量是"小",那么该部分的高度必须为100%(此处屏幕分辨率有效).但是如果孩子的容器是"大"的,那么带有bg-color类的div和该部分必须扩展到超过100%的高度,以便它可以包含所有内容.每个部分都有不同的背景图像,我使用bg-color在背景图像上添加透明色.

html结构看起来像这样

    

        

           ...CONTENT...
        
    


    

        

           ...CONTENT...
        
    


    

        

           ...CONTENT...
        
    

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节有很多内容所以它有更多的高度

JS小提琴

.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

http://caniuse.com/#feat=viewport-units

https://css-tricks.com/viewport-sized-typography/

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

https://dev.opera.com/articles/css-viewport-units/

http://www.w3schools.com/cssref/css_units.asp