All geek questions in one place

Each section must have a height of at least 100%

I was looking for a lot of answers and tricks for this, but nothing worked for me.

Some briefings: The project has a homepage with 5 sections (about us, activities, contacts, etc.). Each section must have a maximum height of 100%. This means that if the child containst is "small", then the section should have a height of 100% (here the screen resolution takes place). But if child containst is "large", then the div with the bg-color class and the section should expand to a height of more than 100%, so it can contain all the content. Each section has a different background image, and I used bg-color to add a transparent color to the background image.

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>

Css looks 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%;
}

div . divs : 100%, , . , , ! .

/, ? (), .

.

+4
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>
Hide result
+1

, vh, , .section div , . . ,

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

Source: https://habr.com/ru/post/1621958/

More articles:


All Articles