Each section must have at least 100% height - html

Question

I've searched for a lot of answers and tricks for this but nothing worked for me.
Some briefing: The project has a homepage with 5 sections (about us,activities,contact etc...). Each section must have AT LEAST 100% height. That means that if the child's containt is "little", then the section must have height 100% (the screen resolution has effect here). But if the child's containt is "large", then the div with class bg-color and the section must expand to over than 100% height so it can contain all the content. Each section has a different background-image and i used bg-color to add a transparent color over the background image.
The html structure seems like this
<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>
The css seems like this:
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%;
}
Some divs with class container page-content have a lot of content. But since the parent divs have height:100%, this content overlays the section at the bottom and it's pretty ugly. Especially when i test it in low resolution screens, almost every section seems broken! i dont want to set overflow with scroll bars.
Any suggestions/solutions please? Since the project will be mobile friendly (bootstrap), a responsive solution would be the best option.
Thank you in advance.

Answer 1

You can achieve it by using view height unit vh , in the fiddle you can see that every .section div has at least full height, see sectionThree has lots of content so it has more height
JS Fiddle
.each-page {
border-top: 1px solid #fff;
min-height: 100vh;
}
----------
UPDATE 1:
In order to fix it for Safari versions less that 8 -because view units are supported in Safari 8+- all you need is to add this to your 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()});
}
And that's it JS Fiddle 2, tested on 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

Answer 2

You can also make section 100% height with 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>