Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Scaling a div

  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Scaling a div

    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

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Well, in theory, you could, by doing something like this:
    Code:
    <!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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •