A Pen by Hervé.

A-Pen-by-Hervé.markdown

Dynamic Responsive Height Class

I was asked in my company to make every screen of our app responsive to height, here is my solution :)

Just extend from Responsive, set your elements and the offset, and you are ready to go !

A Pen by Hervé on CodePen.

License.

index.haml

#div1
#div2
#div3

script.coffee

class Responsive

  constructor: (@name) ->
    @cache()
    @minHeight()    
    @resize()    
    window.onresize = => @resize()    

  resizeEl: (el, offset) ->
    clientHeight  = document.documentElement.clientHeight 
    el.height clientHeight - offset 
    
  getMinHeight: (el) ->  
    parseInt el.css("minHeight").replace("px", "")
    
  setMinHeight: (el, height) ->
    el.css "minHeight", "#{height}px"
    
class ResponsiveBox extends Responsive

  cache: ->
    @el = 
      div1:          $("#div1")
      div2:          $("#div2")
      div3:          $("#div3")

    @offset =   
      div2:   @el["div1"].height() +
              @el["div3"].height()
              
  minHeight: -> 
    # No used in this example

  resize: ->
    @resizeEl @el["div2"], @offset["div2"]
    
new ResponsiveBox()    

style.sass

#div1
  height: 50px
  width: 100px
  
  background-color: orange

#div2
  height: 50px
  width: 100px
  
  background-color: red

#div3
  height: 50px
  width: 100px
  
  background-color: orange