Parent div not following size change when child:hover

Okey so the problem is that the #page wont follow the size change, i want the #page to be 100% height when i hover #text3

http://jsfiddle.net/2EfLz/38/

Answers


Just change height:100% to min-height:100% on #page. That way it's not restricted and can grow when needed, but will not be less than 100%.

Demo: http://jsfiddle.net/2EfLz/49/


add this to your javascript:

$('text3').addEvents({
  mouseover: function(){ 
    var windowHeight = window.getSize().y;
    var text3Height = $('text3').getPosition().y;
    var t3fHeight = $('t3f').getSize().y;

    // padding-top + padding-bottom + border-top + border-bottom
    var paddingHeight = 42; 

    $('text3').setStyles({
      'height':windowHeight - text3Height - t3fHeight - paddingHeight + 'px',
      'overflow':'auto'
    })
  },
  mouseleave: function(){
    $('text3').setStyles({
      'height':'75px', // initial value
      'overflow':'hidden'
    })
  }
});

Since you have specified a fixed height it cannot extend..

Use min-height instead

min-height: 100%;

Need Your Help