Each section must have at least 100% height

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.

Try fullpage.js - http://alvarotrigo.com/fullPage/ ready to use plugin.. — Deepak Yadav, Dec 28 '15 at 12:43
Just tried it but unluckily it messes up everything in my page. That's because i have already a lot of javascript, absolute/fixed positions, a lot of functions in $(window).scroll event etc... — GeorgeGeorgitsis, Dec 28 '15 at 12:54
May I ask why you choose a script solution when this can be done using CCS only? ... To style with script will make your site look and behave slower than necessary. — Ason, Dec 28 '15 at 14:01
I decided to use script because it was a matter of 2 lines of code. The main problem was that the website was ready with a lot of css and html already. In case of css i had to follow browser detection with javascript for safari etc. just as Mi-Creativity clearly answered and commented. I think Nenad's answer is a lot faster, especially for mine situation. — GeorgeGeorgitsis, Dec 28 '15 at 14:09

Mi-Creativity · Answer 1 · 2015-12-28T14:13:10.230

5

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

edited Dec 28 '15 at 14:13

answered Dec 28 '15 at 12:52

Mi-Creativity

9,101
10
33
44

Thanks, that was pretty good, didn't even know that property. In Mozilla & Chrome works great! But what about Safari? I use Safari 5.1.7 on Windows 10 and each section has the height of it's child height... – GeorgeGeorgitsis Dec 28 '15 at 13:09
the browser support is in in the question, http://caniuse.com/#feat=viewport-units for safari, 8 and 9 are fully supporting but for older version you can make an exception using browser detection in javascript – Mi-Creativity Dec 28 '15 at 13:13
browser detection with javascript, browser and version http://stackoverflow.com/questions/2400935/browser-detection-in-javascript – Mi-Creativity Dec 28 '15 at 13:14
Thank you very much for your help. I will use that in my future projects. I learned something new today. But i followed Nenad's answer below, seems more familiar with me and 'faster' since i know javascript/jquery. Thanks again, many wishes for the New Year. – GeorgeGeorgitsis Dec 28 '15 at 13:26
You welcome, however you may consider checking the update answer for safari fix with javascript.. – Mi-Creativity Dec 28 '15 at 13:54

score 1 · Accepted Answer · answered Dec 28 '15 at 13:17

1

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>

answered Dec 28 '15 at 13:17

Nenad Vracar

102,378
14
116
136

That's what i just used, Javascript. But instead of setting the height, i set the min-height. var scr_height = $(window).height(); $('section, .each-page, .bg-color').css('min-height', scr_height); – GeorgeGeorgitsis Dec 28 '15 at 13:21
Yes that will work too https://jsfiddle.net/s0psfnqx/, run it on load and resize. – Nenad Vracar Dec 28 '15 at 13:26
Yes, thanks a lot. Already marked it as the best answer. Thank you very much and many wishes for the New Year. – GeorgeGeorgitsis Dec 28 '15 at 13:28
Glad i could help and happy holidays. – Nenad Vracar Dec 28 '15 at 13:36
Again I find you teaching newbies to use script when it can, and should, be easily solved using CSS. May I ask why you do that? ... And if I'm wrong here, maybe you could point me to where it says script is better for styling than CSS. – Ason Dec 28 '15 at 14:05
@LGSon Why do you assume that OP is newbie, also i never said that JS solution is better, but it is one option other then CSS. – Nenad Vracar Dec 28 '15 at 14:16
My mistake, sorry, to assuming OP were a newbie, though as the question is quite easy solved after some development time I assumed s/he were. I also like to believe that users on SO, with higher reps., should make an example to new users by not, even if it is possible, post something which is bad practice. – Ason Dec 28 '15 at 14:30
@LGSon You don't have to apologize to me i am not offended, if you think this answer is bad feel free to downvote it as i assume you did. And i agree with you that `vh` is meant to be used for this but in case where css fails js come in handy and that is why i posted this answer. – Nenad Vracar Dec 28 '15 at 14:45

Each section must have at least 100% height

2 Answers2

----------