HOWTO Dynamic setup the element’s dimension
Web December 31st, 2005
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;
}
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:
… …
<script type=“text/javascript”>
function adjustHeight() {
var main = document.getElementById(“main”);
var sidebar = document.getElementById(“sidebar”);
if( sidebar.offsetHeight > main.offsetHeight )
main.style.height = sidebar.offsetHeight + ‘px’;
} </script>
<script type=“text/javascript”>
function adjustHeight() {
var main = document.getElementById(“main”);
var sidebar = document.getElementById(“sidebar”);
if( sidebar.offsetHeight > main.offsetHeight )
main.style.height = sidebar.offsetHeight + ‘px’;
} </script>
… …
Now the content’s height is the maximum of “main” and “sidebar”.
[...] I had to put the sidebar explicitly using position: absolute . After the reorganizing the divs, the adjustHeight hack does not make sense any longer, so it is with the vertical [...]