当孩子：hover时，父div不跟随大小更改

Question

Okey所以问题是#page不会跟随尺寸变化，我希望当我悬停#page时#text3高度为100％

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

Answer 1

将此添加到您的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'
    })
  }
});

Answer 2

只需将height:100%更改为min-height:100%上的#page即可。这样它就不受限制，可以在需要时增长，但不会低于100％。

演示：http://jsfiddle.net/2EfLz/49/

Answer 3

由于您指定了固定高度，因此无法扩展..

使用min-height代替

min-height: 100%;