setting height of divs to window height

Question

I have four divs with different IDs. How would I set height for all these divs?

<div id="slide-1">a</div> <div id="slide-2">b</div> <div id="slide-3">c</div> <div id="slide-4">d</div>

I know we can do something like this below, but there are other divs too before this.

$('div').height($(window).height());

I want to set these four divs to window height alone. I can't hard-code here as the slides may vary.

instead of $('div').height($(window).height()); put the div id $('#slide-1').height($(window).height()); for example — Khalid
– Khalid, Commented Jul 22, 2014 at 16:39

Amin Jafari · Accepted Answer · 2014-07-22 16:49:24Z

3

this will select all the divs that their ids start with "slide-" and set the height to window height:

$('div[id^="slide-"]').height($(window).height());

edited Jul 22, 2014 at 16:49

answered Jul 22, 2014 at 16:39

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Regent Over a year ago

And fiddle for this: jsfiddle.net/f3C3V. Also please replace $(window).height with $(window).height() to make answer correct

RGS · Accepted Answer · 2014-07-22 16:48:01Z

2

$('div[id^="slide-"]').css("height", $(window).height() + 'px');

Demo:

http://jsfiddle.net/463KU/1/

edited Jul 22, 2014 at 16:48

answered Jul 22, 2014 at 16:40

RGS

5,2217 gold badges44 silver badges69 bronze badges

1 Comment

Regent Over a year ago

It will set height for all DIVs on page. OP talked about only selected 4 DIVs

PeterKA · Accepted Answer · 2014-07-22 16:57:18Z

DEMO

 $('div').filter(function() { return /^slide-[1-4]$/.test( this.id ); }) .height( $(window).height() );

Muhammad Ali · Accepted Answer · 2014-07-22 16:39:33Z

if you like to increase the hieght of specific divs use class for multiple

<div class="divHeight" id="slide-1">a</div> <div class="divHeight" id="slide-2">b</div> <div class="divHeight" id="slide-3">c</div> <div class="divHeight" id="slide-4">d</div> $('.divHeight').height($(window).height());

latiosaxe · Accepted Answer · 2014-07-22 16:43:13Z

I also recommended you use this way to get window height:

var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; <div class="divHeight" id="slide-1">a</div> <div class="divHeight" id="slide-2">b</div> <div class="divHeight" id="slide-3">c</div> <div class="divHeight" id="slide-4">d</div> $('.divHeight').height(windowHeight);

Collectives™ on Stack Overflow

setting height of divs to window height

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Related