Я искал много ответов и уловок для этого, но у меня ничего не работало.

Краткая информация: У проекта есть домашняя страница с 5 разделами (о нас, деятельности, контактах и ​​т. д.). Высота каждой секции должна быть НЕ МЕНЕЕ 100%. Это означает, что если дочерний контейнер «маленький», то секция должна иметь высоту 100% (здесь имеет значение разрешение экрана). Но если дочерний контейнер «большой», то div с классом bg-color и раздел должны расширяться до высоты более 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%, это содержимое перекрывает раздел внизу, и это довольно некрасиво. Особенно, когда я тестирую его на экранах с низким разрешением, почти каждый раздел кажется сломанным! Я не хочу устанавливать переполнение полосами прокрутки.

Любые предложения / решения, пожалуйста? Поскольку проект будет оптимизирован для мобильных устройств (бутстрап), лучшим вариантом будет адаптивное решение.

Заранее спасибо.

4
GeorgeGeorgitsis 28 Дек 2015 в 15:40

2 ответа

Лучший ответ

Вы также можете сделать высоту section 100% с помощью js

$(window).on("resize", function () {
  var fullHeight = $(window).height();
  $('section').height(fullHeight);
}).resize();
.s-one {
  background: blue;
}

.s-two {
  background: green;
}
<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>
1
Nenad Vracar 28 Дек 2015 в 13:17

Вы можете достичь этого, используя единицу высоты представления vh, в скрипте вы можете видеть, что каждый div .section имеет как минимум полную высоту, см. SectionThree имеет много содержимого, поэтому он имеет большую высоту

JS Fiddle

.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

5
Mi-Creativity 28 Дек 2015 в 14:13