Scaling a div [Archive] - CodingForums.com

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é, Equalité et Fraternité!</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.