#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    North West UK
    Posts
    119
    Rep Power
    13

    controlling height of a div with css/javascript?


    Hi
    I have a an orange coloured div the runs down the left side of the web page and the nav buttons are contained in this orange strip. At the moment, I have a stylesheet which sets a border-bottom to 540px so that the div's overall length is such that it runs the length of the screen terminating under the footer.
    http://p0c79.phpwebhosting.com/~p0c7...g_process.html

    the relevant bit of the stylesheet is:

    #navigation,#navigationcp {
    width: 200px;
    z-index: 50;
    position: relative;
    top: 0px;
    left: 0px;
    float: left;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 10px;
    padding-bottom: 80px;
    margin-bottom: 0px;
    height: auto;
    background-color: #f74902;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 190px;
    }

    #navigationcp {
    padding-bottom: 540px;
    }



    I would like this orange strip to be the appropriate height for any screen size and any resolution. My stripe works for a 17inch monitor at 1024 by 768 but I would like to accommodate all the variations that are possible.
    Is there some way to combine javascript and CSS to have the stripe grow or shrink as appropriate.
    Thanks
    david
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    Jenbach, Austria
    Posts
    39
    Rep Power
    14

    Try this


    #navigation,#navigationcp {
    width: 200px;
    z-index: 50;
    position: relative;
    top: 0px;
    bottom: 10px;
    left: 0px;
    float: left;
    height: 100%;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 10px;
    padding-bottom: 80px;
    margin-bottom: 0px;
    height: 100%;
    background-color: #f74902;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 190px;
    }

    #navigationcp {
    padding-bottom: 540px;
    }

    Look at the 'height' style. I hope this helps.
    welcome to the real world
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    North West UK
    Posts
    119
    Rep Power
    13

    thanks


    Of course - that will probably do it - off to try out your suggestion - many thanks
    david

IMN logo majestic logo threadwatch logo seochat tools logo