<html>
<head>
<style>
#titlebar{
position: relative;
background-color: dimgray;
width: 100%;
height: 50px;
}
#content{
border: 1px solid red;
width: 100%;
height: 100%;
}
span{
position: absolute;
right: 100px;
}
</style>
<head>
<body>
<div id="titlebar"><span>My Title</span></div>
<div id="content">My content</div>
</body>
</html>
This causes a scroll bar to happen, my own guess is it looks as if it is
scrolling the #titlebar's 50 pixels ( 50 pixels + 100% height of #content).
Preferring to stay as standard as possible, how can I indicate that this
should not scroll?
Basically, I want content to be 100% of what is left over after title (
height: (100% - 50px); )
Is that possible?
My other optins are to wrap everything in larger non relative sections, but
then it seems like I am creating proxies for tables, someting I was trying
to avoid in moving to CSS.
Thanks,
bb