Size a div by height of the browser

Question

How can I make a div be the height of the browser - 40px?

If that is easy, how can I make a div be (height of the browser) - (how far down the element begins on the page) - (40px)?

CSS only is ideal. Doing this in javascript is easy, but we all know that is bad form :)

@watson unfortunately no Less please. But it's just compiled into CSS anyway, so if you can write it in Less you can copy the CSS :) — Don P, Jun 12 '13 at 18:10
@cimmanon - I have a scrollable list that I'd like to take size using as much space as possible. But it's not at the top of my page. — Don P, Jun 12 '13 at 18:11
@DonnyP A similar question has been asked here: http://stackoverflow.com/questions/6207447/css3-evaluatable-expressions Have you checked? — rineez, Jun 12 '13 at 18:48

score 1 · Answer 1 · answered Jun 12 '13 at 18:00

1

You can use padding on the bottom:

selector {
   position:absolute;
   ....
   height:100%;
   padding-bottom:40px;
}

answered Jun 12 '13 at 18:00

Ibu

Won't this cause weirdness if there's a background involved? – dlev Jun 12 '13 at 18:05
1

This makes the page extend beyond the browser window, not usually what you want with `height: 100%;` http://jsbin.com/efaqok/2/edit – dezman Jun 12 '13 at 18:06

score 1 · Answer 2 · answered Jun 12 '13 at 18:01

1

div {
    height: calc(100% - 40px);
}

I don't think there is any way to get the 'how far down the page the element begins' info without JS.

answered Jun 12 '13 at 18:01

dezman

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

body,html{
  height:100%;
}

div#right{
  height:100%
}

And than you can add some padding.

edited May 23 '17 at 10:25

Community

answered Jun 12 '13 at 18:01

Anton Belev

3 Answers3