Термоусадочная планка с плавающим дном

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

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

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

Я думаю, что вам не нужно будет JQuery изменить высоту, просто изменить содержание.

Answer 3

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