Shrink-To-Fit при плавающем дне

Question

См. Окно, застрявшее внизу справа. Прямо сейчас это как фиксированная высота 300 пикселей. Вместо этого я хотел бы быть настолько высоким, насколько это необходимо. Это означает, что мне нужно, чтобы высота автоматически подстраивалась под содержание. Когда я удаляю свойство height, оно принимает полную высоту.

Кроме того, я хотел бы иметь возможность «обновлять» высоту всякий раз, когда я обновляю содержимое с помощью javascript (jQuery).

Answer 1

Вы видите высоту 100%, потому что ваш стиль для html, body, div, iframe определяет высоту 100%.Чтобы переопределить это, просто установите свой рост на «авто».Например:

div.sidebar {
  border-left: thin solid #66CCFF;
  border-right: thin solid #66CCFF;
  bottom: 0;
  display: inline-block;
  height: auto; /* <-- New Value */
  /*height: 300px; <-- Old Value */
  overflow: hidden;
  position: absolute;
  right: 40px;
  width: 200px;

}

Размер поля будет таким, чтобы он соответствовал размеру содержимого.Вы также можете рассмотреть возможность использования свойства max-height для установки верхнего предела.Скажите что-то вроде max-height:640px;.

Answer 2

Изменить height: 300px; на height: auto;.

Answer 3

Измените эти свойства:

div.sidebar {
  position: fixed;
  height: auto;
}

Я думаю, вам не понадобится jquery для изменения высоты, просто измените содержимое.