Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Craig Watson
Craig Watson
27,930 Points

Would using jQuery to set the height of an element based on the window height be bad practice of a full height image?

Hi everyone!

We have all seen the full size cover page on sites, and when you scroll the image was exactly the same height as the window.

My questions is;

iOS currently has damn awful support for using any CSS way of doing this I can come across.

jQuery can do this pretty easily, with document load and window re-size.

Sooo...

Shall I just use the jQuery version?

or

A pot full of media queries keeping me somewhere near?

Craig

Craig Watson
Craig Watson
27,930 Points

This is the code I have for jQuery version :S

$(window).load(function(){ 

    var windowHeight = $(this).height();

    $('.jumbotron-wrap').outerHeight(windowHeight);

});

$(window).resize(function(){

    var windowHeight = $(this).height();

    $('.jumbotron-wrap').outerHeight(windowHeight);

});

3 Answers

Dale Bailey
Dale Bailey
20,269 Points
Dale Bailey
Dale Bailey
20,269 Points

css3 has the min-height and vh unit which stands for (viewport height) or vw (viewport width) the value is a percentage. this would be better as not everyone will have js enabled on there browser.

section {
    min-height: 100vh;
    height: auto;
    min-width: 100vw;
}

You could also just do percentages

    min-height: 100%;

Just bare in mind it would be 100% of the parent and your content could exceed the height.

Craig Watson
Craig Watson
27,930 Points

I love the thought of viewport units, I just wonder why no one else seems to be using them....

I will give them a go because I had not considered them and "can I use" seems to suggest support is good. A couple of bugs here and there but in my case I cant see them being an issue.

Thanks Dale!

Dale Bailey
Dale Bailey
20,269 Points

No worries, similar things can be achieved in javascript but they seem to be messy especialy if your content exceeds 100% height which is probably will on mobile. If your concerned about support on older browsers I think modernizr.js can handle some of it. http://modernizr.com/

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Remember that if you use Sass and Compass, you can have it add the vendor prefixes that you need for cross-browser compatibility. I need to spend some more time and take the advanced Sass courses when I am done with a complicated database project I decided to tackle, but I have taken enough to know that using a precompiler is the way to go for modern CSS.

Craig Watson
Craig Watson
27,930 Points

Hi Ted,

Surprisingly no vendor prefixes need to be used for vh / vm :) I am using auto prefixer so that will cover my back should I miss something.

The advanced Sass course is great! A real eye opener for the way Sass works and what it can do. I recently downloaded the bootstrap V4 alpha and took a look through the way they have there Sass as V4 is now built with Sass not ported over from less.

WOW! Some of the mixins they use are fantastic tools on there own.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I really want to get to the point where I can use Slim, Twig, and Sass to make nice sites. I am not sure why there is such an infatuation with one page sites right now (although they do have a place) because I think you can do so much more with those tools.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

And the short answer to your question is yes, in my opinion. Leave styling to CSS. JavaScript is for the extra stuff.