...

View Full Version : Scaling a div



skmathunny
11-07-2008, 11:45 PM
Hi,

html and css newbie here. This issue is as follows:

<body>
<div style="background-color: Red; width: 400px; height: 100px" onclick="javascript:does(this);"></div>
<div id="div1" style="position:absolute; bottom: 0; background-color: Green; width: 400px; top: 100px; min-height: 100px"></div>
</body>

I would like div1 to take the space left over when you click on the first div. Currently the second div stays in place. I would like it expand upwards to fill the space left by the first div. I know I can do this using javascript. But is there is a way to do this without javascript, just with html and css.

Thx
Sam

Apostropartheid
11-08-2008, 12:13 AM
Well, in theory, you could, by doing something like this:

<!doctype html>
<html xml:lang="en">
<head>
<meta http-equiv="content-type"
content="application/xhtml+xml;charset=utf-8"/>
<title>Libert&eacute;, Equalit&eacute; et Fraternit&eacute;!</title>
<style type="text/css">
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#container {
padding-top: 100px;
width: 400px;
background: #f00;
}
#content {
height: 100px;
background: #00f;
}
#container:hover,
#container:hover #content {
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
</div>
</div>
</body>
</html>However, it's quite tricky to implement and WILL break compatibility with older browsers, so probably isn't what you're looking for.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum