Question

我为此寻找了很多答案和技巧，但对我来说没有任何效果。

一些简报：该项目有一个包含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％，因此该内容覆盖了底部的部分并且非常难看。特别是当我在低分辨率屏幕上测试时，几乎每个部分都显得破碎！我不想用滚动条设置溢出。

有任何建议/解决方案吗？由于该项目将是移动友好型（引导程序），因此响应式解决方案将是最佳选择。

提前谢谢。

Answer 1

你可以通过使用视图高度单位vh来实现它，在小提琴中你可以看到每个.section div至少有完整的高度，请参阅第3节有很多内容所以它有更多的高度< / p>

JS Fiddle

.each-page {
    border-top: 1px solid #fff;
    min-height: 100vh;
}

----------

更新1：

为了修复少于8 - 的Safari版本，因为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

上进行了测试

Answer 2

您还可以使用js

使section 100％高度

＆＃13;

$(window).on("resize", function () {
  var fullHeight = $(window).height();
  $('section').height(fullHeight);
}).resize();

＆＃13;

.s-one {
  background: blue;
}

.s-two {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="s-one"></section>
<section class="s-two"></section>

＆＃13;

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

2 个答案:

----------