Как установить коробку в нижней части окна?

Question

Как мне установить значение css для окна анимации (в), которое находится в поле (вне), которое не равно высоте окна (вверх), от вниз до.

То, что я пытаюсь с оживляющей это:

$('#box-out').hover(function(){ 
    $('#box-in').animate({height: '400px'},2000); 
}); 

Он расширяет вниз, как парить правильно? Я просто хочу, чтобы он расширялся вверх. Чтобы иметь возможность сделать это, мне нужно установить его на дно коробки (out).

Как это сделать? Пожалуйста, проверьте: http://jsfiddle.net/DxEMT/

Answer 1

Попробуйте

#box-out{ 
    width:300px; 
    height:400px; 
    border:1px solid black; 
    position: relative; 
} 
#box-in{ 
    width:300px; 
    height:100px; 
    background:red; 
    position:absolute; 
    bottom:0; 
} 

Демо: Fiddle

Answer 2

$('#box-out').hover(function(){ 
    $('#box-in').animate({ 
     height: '-400px' 
    },2000); 


}); 

Сделать расширение вверх, переворачивая высоту?

Answer 3

Абсолютное положение # коробчатого в внутри # коробке-с нижней: 0; и дать # box-out position-relative Это сделает трюк.

#box-out{ 
    width:300px; 
    height:400px; 
    border:1px solid black; 
    position: relative; 
} 
#box-in{ 
    float:left; 
    width:300px; 
    height:100px; 
    background:red; 
    position:absolute; 
    bottom:0px; 
} 

Остальное похоже на ваш существующий код.

Рабочий пример: http://jsfiddle.net/DxEMT/2/

Answer 4

попробовать положение абсолютного .. LIVE DEMO

#box-out 
{ 
    width:300px; 
    height:400px; 
    border:1px solid black; 
    position: relative; 
} 
#box-in 
{ 
    width:300px; 
    height:100px; 
    background:red; 
    position:absolute; 
    bottom:0; 
}