HOWTO Dynamic setup the element's dimension

The theme of this blog is based upon Yadda, a fixed-width, two-column wordpress theme. To take the full advantage of the current wide-screen, I modified the stylesheet to make it adaptive to the screen width:

#main {
  padding: 5px;
  margin: 0px 220px 0 3px;
}

#sidebar {
  width: 175px;
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 10px 10px 10px 10px;
  background-color: #fafafa;
}

Since the position style of sidebar is absolute, if the height of the “main” is smaller than the “sidebar”, the “sidebar” would overlap the “footer”, the height of the “main” is only determined in the run-time. Here is the solution:

function adjustHeight() {
  var main = document.getElementById("main");
  var sidebar = document.getElementById("sidebar");
  if (sidebar.offsetHeight > main.offsetHeight)
    main.style.height = sidebar.offsetHeight + "px";
}

Now the content’s height is the maximum of “main” and “sidebar”.