Why is css height not working?

Question

If I try to set the height of an element I can't get it working. I have tried doing it with css and jquery but both without result.

This is the css I tried:

#slider{
 width:100%;
 height:100%;
 background-image: url(/img/background.jpg);
 background-size: 100%;
}

and this the Jquery code

var screen_height = $(document).height();
$('#slider').css('Height', screen_height );

does somebody know how to fix this. This is not the first time I have this problem and normally I can fix it with Jquery but now even that doesn't work.

lowercase --> $('#slider').css('height', screen_height ); and maybe you need to add 'px' like so: $('#slider').css('height', screen_height+'px' ); — caramba, Oct 07 '14 at 15:25
Just make it like this $('#slider').height( $(window).height() ); — Bojan Petkovski, Oct 07 '14 at 15:27
all files are included correctly and $('#slider').height( $(window).height() ); doesn't work. — Vinc199789, Oct 07 '14 at 15:30
You need to set 100% height for html and body - [Like this question](http://stackoverflow.com/a/6654996/2930477). `html{ height: 100%; } body { min-height: 100%; }` — misterManSam, Oct 07 '14 at 15:30
@Vinc199789 Make a fiddle because everything we told you is working, so you must have another issue going on :) — Bojan Petkovski, Oct 07 '14 at 15:34
@Vinc199789 And why do you have the meta tag inside your #page div? — Bojan Petkovski, Oct 07 '14 at 15:38
So you are loading another file inside #page? With jQuery load? — Bojan Petkovski, Oct 07 '14 at 15:41
yes and the site is a little bit to complicated to create a jsfiddle — Vinc199789, Oct 07 '14 at 15:42
What does the console log say? The jQuery code you tried and the jQuery suggestions people have been giving you all work, so there is something else that is wrong. Are you sure you're including jQuery before executing the code? — APAD1, Oct 07 '14 at 15:44

score 2 · Accepted Answer · answered Oct 07 '14 at 15:46

So if you are inserting another page into #page you need to add the height of the slider when the loading is complete.

$( "#page" ).load( "content.php", function() {
    $('#slider').height( $(window).height() );
});

Or like this

$( "#page" ).load( "content.php", function() {
    $('body').find('#slider').height( $(window).height() );
});

score 0 · Answer 2 · answered Oct 07 '14 at 15:30

0

try this:-

var screen_height = $(document).height();
$('#slider').css('height', screen_height );

or

$('#slider').height(screen_height );

answered Oct 07 '14 at 15:30

Umesh Sehta

10,555
5
39
68

score 0 · Answer 3 · answered Oct 07 '14 at 15:30

0

For height: 100%; to work in #slider, you must also have an explicit height set in its parent. Or, have relative height set in all ancestors all the way up to and including html or an ancestor with explicit height set.

answered Oct 07 '14 at 15:30

TylerH

20,799
66
75
101

Gildas.Tambo · Answer 4 · 2014-10-07T15:36:54.827

0

Use this DEMO

var screen_height = $(document).height();
$('#slider').css({height: screen_height});

edited Oct 07 '14 at 15:36

answered Oct 07 '14 at 15:30

Gildas.Tambo

22,173
7
50
78

You don't need 'px' :) – Bojan Petkovski Oct 07 '14 at 15:32
You don't need {} if there is just one css statement – caramba Oct 07 '14 at 15:33
@caramba no you don't but this way is more familiar to pure css and you don't need to remember `.height` ... – Gildas.Tambo Oct 07 '14 at 15:35

Why is css height not working?

4 Answers4