SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    110
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Stretching DIV height

    Ok well I have a DIV menu bar that I want to stretch 100% in height. It worked perfectly fine until I added the XHTML doctype. So I tried absolute positioning which worked but then my other divs started overlapping them.

    So I want to know if there is any javascript code to make my menu bar stretch vertically. The name of the div I want to stretch is the class "sidemenu".


    CSS
    HTML Code:
        html {
        height: 100%;
         
        }
         
        body {
        min-height: 100%;
        position: relative;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        background: #000;
        margin: 0;
        padding: 0;
        color: #CCC;
         
        }
        .container {
        width: 100%;
        background-color: #0c0c0c;
        background-image: url();
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: top;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
         
        }
        .content {
        background-color: #222;
        padding: 5px;
        position: relative;
        width: 1000px;
        min-height: 500px;
        margin-left: auto;
        margin-right: auto;
         
        }
        .sidemenu {
        background-color: #111;
        padding: 5px;
        width: 250px;
        height: 100%;
        position: relative;
        float: right;
        margin-right: -5px;
        margin-top: -5px;
         
        }
        .footer {
        padding: 5px;
        height: 210px;
        background-image: url(../Images/footerbackground.gif);
        background-repeat: no-repeat;
        background-color: #0c0c0c;
        position: relative;
        width: 960px;
        margin-left: auto;
        margin-right: auto;
         
        }
        .headerleft {
        background:url(../Images/header-left.png) no-repeat left top;
        height: 209px;
         
        }
        .header {
        background:url(../Images/header-middle.gif) repeat-x left top;
        height: 209px;
        max-width:1920px;
        min-width: 960px;
        background-color: #073444;
         
        }
        .headerright {
        background:url(../Images/header-right.png) no-repeat right top;
        height: 209px;
        z-index: -999;
         
        }
         
        .menu {
        position: absolute;
        margin-top: -35px;
        width: 1024px;
        margin-left: 10px;
         
        }
         
        #content2 {
        min-width: 610px;
        max-width: 940px;
        position: relative;
         
        }

    HTML

    HTML Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
        <title>Metal Gear Planet</title>
         
        <link rel="stylesheet" type="text/css" href="sheets/style.css"/>
        <link rel="stylesheet" type="text/css" href="sheets/navcss.css"/>
         
        </head>
         
         
        <body>
        <div class="header"><div class="headerleft"><div class="headerright"></div></div></div>
         
        <div class="menu">
        <ul id="nav">
        <li><a href="../index.php">Home</a></li>
        <li><a href="../news/">News</a></li>
        <li><a href="#">Walkthroughs</a>
        <ul>
        <li><a href="../walkthroughs/mgs1/intro.html">Metal Gear Solid 1</a></li>
        <li><a href="../walkthroughs/mgs2/intro.html">Metal Gear Solid 2</a></li>
        <li><a href="../walkthroughs/mgs3/intro.html">Metal Gear Solid 3</a></li>
        <li><a href="../walkthroughs/mgs4/intro.html">Metal Gear Solid 4</a></li>
        </ul>
        </li>
        <li><a href="#">Videos</a>
        <ul>
        <li><a href="../walkthroughs/mgs1/more/video.html">Metal Gear Solid 1</a></li>
        <li><a href="../walkthroughs/mgs2/more/video.html">Metal Gear Solid 2</a></li>
        <li><a href="../walkthroughs/mgs3/more/video.html">Metal Gear Solid 3</a></li>
        <li><a href="../walkthroughs/mgs4/more/video.html">Metal Gear Solid 4</a></li>
        </ul>
        </li>
        <li><a href="#">Hints</a>
        <ul>
        <li><a href="../walkthroughs/mgs1/more/hints.html">Metal Gear Solid 1</a></li>
        <li><a href="../walkthroughs/mgs2/more/hints.html">Metal Gear Solid 2</a></li>
        <li><a href="../walkthroughs/mgs3/more/hints.html">Metal Gear Solid 3</a></li>
        <li><a href="../walkthroughs/mgs4/more/hints.html">Metal Gear Solid 4</a></li>
        </ul>
        </li>
        <li><a href="../downloads/">Downloads</a></li>
        <li><a href="../downloads/">Affiliates</a></li>
        </ul>
        </div>
        <div class="container">
         
        <div class="content">
         
        <div class="sidemenu">
        <p>Content</p>
        </div>
         
        <div id="content2">
        <h1>What the ****!</h1>
        <p>JHlasdklj asdjlksafjskld sfjl;asd asdjl; asdjkalsd asjdl;smdas sadljas dadjl asdkj</p>
        <p>Welcome to the Metal Gear Solid 3 Walkthrough. Note that the choice of difficulty for this Walkthrough is based on Normal which could be the difference in quantity of items, an enemy’s vision, how much life you have, quantity of enemy’s in an area, and how much damage you can tolerate.</p>
         
        </div>
        </div>
         
        <div class="footer"><p>Hi</p></div>
         
        </div>
         
        </body>
        </html>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't say under what circumstances you want to do this.
    If it's as soon as it's rendered, give the div an ID and
    place this code anywhere below it:
    Code:
    <script type='text/javascript'>
    
    var menuBar = document.getElementById( 'myDiv' );
    
    menuBar.style.height = menuBar.offsetHeight * 2 + 'px';
    
    </script>
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    110
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It increased the height, but only a little bit. I just want it to stretch all the way to the bottom of the page.


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
  •