CSS replacement for clientHeight?
The code below puts a green content div beneath a fixed red top bar whose dynamic height depends on the amount of text inside it. The top position of the content div and its height are calculated with the help of the clientHeight and window.innerHeight properties, see function position_content(). I wonder if it's possible to do this without javascript.
Any ideas?
Code:
<style>
body {padding:0; margin:0}
#topbar {position: fixed; background: red; left: 0; top:0; right:0; text-align: center; padding: 20px; z-index: 1}
#content {position: relative; background: green; padding: 20px; box-sizing: border-box;}
</style>
<div id="topbar" >
<h1>Top bar</h1>
This is the header This is the header This is the header This is the header This is the header This is the header This is the header This is the header This is the header This is the header This is the header
</div>
<div id="content" >
begin<br>content<br>content<br>end
</div>
<script>
function position_content()
{
document.getElementById('content').style.top=document.getElementById('topbar').clientHeight+'px';
document.getElementById('content').style.minHeight=window.innerHeight-document.getElementById('topbar').clientHeight+'px'
}
window.onload=position_content
window.onresize=function(){position_content()}
</script>
