Каков самый простой способ заставить родительский div #container автоматически регулировать высоту, когда внутренний div #child contenteditable превышает высоту родительского div.
Вот пример. http://jsfiddle.net/ULUJX/ Попробуйте вводить текст внутри #child div, пока высота не превысит родительский div .
Я бы отслеживал keyup событий и смотрел высоту #child, например:
var $child = $('#child');
var $container = $('#container');
var container_height = $container.height();
$container.resizable();
$child.keyup(function() {
var h = $child.height();
if(h > container_height) {
$container.height(h);
container_height = h;
}
});
Вот обновленная версия вашего jsfiddle: http://jsfiddle.net/ambiguous/ULUJX/10/
Если вы хотите, чтобы он также уменьшился, просто измените if и позаботьтесь о начальных размерах вещей.
$container.height() в container_height, поэтому мне нужно его обновить. Вы также можете везде говорить $container.height() и не заморачиваться с container_height. Кэширование высоты в переменной — это простой способ избежать повторного вычисления высоты; то же самое касается хранения $('#container') в $container и $('#child') в $child. Просто привычка избегать ненужных вызовов функций.
- person mu is too short; 29.01.2011
я проверял это, и это работает хорошо
(function heightFix($){
var parentCon = $('#container'),
child = $('#child').height();
if(parentCon.height() < child){
parentCon.height(child)
}
setTimeout(function(){
heightFix($);
},100)
}(jQuery));
вы можете изменить скорость, чтобы обновить высоту быстрее, но если вы собираетесь использовать ее в редактируемом поле, было бы лучше использовать триггер события, например
$('#child').live('keypress', function(){
var parentCon = $('#container'),
child = $(this).height();
if(parentCon.height() < child){
parentCon.height(child)
}
});
