Skip to content

Instantly share code, notes, and snippets.

@htatche
Last active August 29, 2015 13:55
Show Gist options
  • Save htatche/8689648 to your computer and use it in GitHub Desktop.
Save htatche/8689648 to your computer and use it in GitHub Desktop.
A Pen by Hervé.

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.

#div1
#div2
#div3
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()
#div1
height: 50px
width: 100px
background-color: orange
#div2
height: 50px
width: 100px
background-color: red
#div3
height: 50px
width: 100px
background-color: orange
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment