Question

See the box stuck the bottom right. Right now it as a fixed height of 300px. Instead I would like to be just as high as necessary. Meaning I need the height to adjust automatically to the content. When I remove the height property it assumes full height.

Additionally, I would like to be able to “refresh” the height whenever I update the content via javascript (jQuery).

Answer 1

Your seeing a height of 100% because your style for html, body, div, iframe specifies height of 100%. To override this, just set your height to “auto”. Like this:

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;

}

This will size the box so that it is only the same size as the content. You might also want to consider using the max-height property to set an upper limit though. Say something like max-height:640px;.