1

I know there are plenty of similar question, but i'm looking for a cross-browser approach with pure CSS (not JS).

I have 3 div (Fiddle here):

  1. Top

    #top{ height: 100px; }

  2. Bottom

    #bottom{ height: 50px; position: absolute; bottom: 0; }

  3. Middle div, that should take all the remaining space

    #middle{ height: calc(100% - 150px); }

This is working exactly as i want, but unfortunaly calc() is not supported in all browsers, as we can see here

So, what should i use instead? (only CSS, not JS)

pumpkinzzz
  • 2,907
  • 2
  • 18
  • 32
  • you will need to use JS or `position:fixed` and position it accordingly – Vitorino fernandes Jan 07 '15 at 12:49
  • `calc` is pure CSS..and it's good for the last three versions of IE. – Paulie_D Jan 07 '15 at 12:51
  • 1
    well you can always use padding-top:100px; padding-bottom:50px; height:100%; – himanshu Jan 07 '15 at 12:52
  • As you correctly point, `calc()` is actually cross-browser but not supported by older versions. I presume you want to target IE8. IN that case, would the suggestion of caniuse to use `expression()` be a possibility ? – Laurent S. Jan 07 '15 at 12:52
  • 1
    possible duplicate of [CSS: get div to take up 100% body height, minus fixed-height header and footer?](http://stackoverflow.com/questions/15021573/css-get-div-to-take-up-100-body-height-minus-fixed-height-header-and-footer) – Pete Jan 07 '15 at 12:52
  • http://jsfiddle.net/peg0e1pq/2/ something like this with position:fixed – Vitorino fernandes Jan 07 '15 at 12:54
  • This is a basic "sticky footer" question, for which there are many CSS solutions covering browsers including IE6. Make friends with Google (and forget `position: absolute`). – ralph.m Jan 07 '15 at 12:55
  • @VitorinoFernandes you are just converting div's px height in an arbitrary percentage and making subtraction, that's not what i wanted. – pumpkinzzz Jan 07 '15 at 16:02
  • @himanshu padding would be included in the scrollable content, isn't it? – pumpkinzzz Jan 07 '15 at 16:03
  • @Bartdude exactly, overall android browsers so i guess can't use it, thanks anyway. – pumpkinzzz Jan 07 '15 at 16:03

0 Answers0