SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    height adjustment problem

    hey guys, i private messaged jofa with this problem and it seems he is working on a solution.. maybe someone that is javascript proficient as jofa may know..

    jofa(the man) wrote me a script to adjust the height of my div to the bottom of the browser automatically.. it was basically having a left and right div with one always spanning the height of the browser (even when resized) but.. now i have a div that is above the 'left' and 'right' div's and its giving me 50px scroll since the script doesnt compensate for the div height above the left and right div

    here is my code

    html
    -----------------
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html><head>
    <title></title>
    <style type="text/css">
    @import "ss.css";
    </style>
    <script type="text/javascript" language="javascript">
    function setHeight()
    {
    var div1 = document.getElementById("left");
    var div2 = document.getElementById("right");
    div1.style.height = div2.offsetHeight;
    var h = document.body.offsetHeight;
    var h2 = div2.offsetHeight + div2.offsetTop;
    div1.style.height = (h2 > h) ? h2 : h;

    }
    function init()
    {
    setHeight();
    if(window.addEventListener)
    {
    // Mozilla
    window.addEventListener("resize", setHeight, false);
    }
    else
    {
    // IE
    window.attachEvent("onresize", setHeight);
    }
    }
    </script>
    </head><body onload="setHeight();init();">

    <div id="top"><img src="Untitled-1.jpg" width="550" height="50" border=0 alt="">
    </div>

    <div id="left">

    <div style="width:375;text-align:left;"><br />
    this is the new layout for my site.. pretty simplistic but thats how i like my women
    </div>

    </div>

    <div id="right">
    <a href="" target="_top">pictures</a><br />
    <a href="" target="_top">files</a><br />
    <br />
    <img src="aim.gif" width="16" height="16" border=0 align="top" alt=""/>
    </div>

    </body>
    </html>
    ----

    css
    ------
    body {
    background:#f5f5f5;
    color:#000000;
    padding:0px;
    margin:0px;
    text-align:left;
    }

    #top {
    position:absolute;
    top:0px;
    left:0px;
    height:50px;
    width:100%;
    font: 11px verdana,sans-serif;
    padding:0px;
    background:#3399FF;
    background-image:url("bg.jpg");
    color:#000000;
    text-align:left;
    }

    #right {
    position:absolute;
    top:50px;
    left:400px;
    width:150px;
    font: 11px verdana,sans-serif;
    padding:3px;
    background:#f5f5f5;
    color:#000000;
    text-align:left;
    }

    #left {
    position:absolute;
    top:50px;
    left:0px;
    width:400px;
    font: 11px verdana,sans-serif;
    padding:3px;
    color:#000000;
    background:#fff;
    text-align:center;
    }
    ----

    thx for the help...

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm.. or is there a better way to do this? i'd like to have a header section at the very top that spans the width of the browser...
    then 2 div's or tables under it that would hold the content in the left one and then the menu in the other.. but i want both boxes to span the height of the screen


Bookmarks

Posting Permissions

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