PDA

View Full Version : 100% height of container?

codegoboom
10-31-2004, 03:50 PM
Can something be done with this so that using 100% for height would achieve the same effect as the expression (which is IE-only)?

<html>
<head>
<title>null</title>
<!-- saved from url=(0013)about:internet -->
<style type="text/css">
html
{
height:100%;
}

body
{
margin:0px;
padding:0px;
height:100%;
}

.box
{
float:left;
width:25%;
height:100%;
overflow:hidden;
border-right:1px solid threedshadow;
}

.bar
{
margin:0px;
padding-left:0.25em;
background:threedlightshadow;
border-bottom:1px solid threedshadow;
}

.vport
{
overflow:auto;
height:expression(parentNode.offsetHeight - offsetTop);
}

</style>
</head>
<body>
<div class="box">
<h4 class="bar">Heading</h4>
<div class="vport">
<div>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
<p>Lorem...</p><p>Ipsum...</p><p>Dolor...</p>
</div>
</div>
</div>
</body>
</html>
codegoboom
11-01-2004, 02:56 AM
More generally...

Can CSS set a percentage width|height relative to the total w|h of a parent element other than the body?
codegoboom
11-13-2004, 02:43 AM
That was a yes or no question, directed at anyone other than myself. :rolleyes:
Jalenack
11-13-2004, 07:51 PM
I believe so...i'm fairly certain it will work with width, but I've had problems with heights before....but im pretty sure css can make relative %s of other %s ..
codegoboom
11-13-2004, 08:09 PM
Thanks; if you happen to remember how you had the width configured, I'd be interested in the details. :)