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
  1. #1
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts

    How to have a div auto-fill to the bottom of a page

    I'm using this below

    Code:
    <html>
    <head>
    <style type="text/css">
    body {
    	border:0;
    	margin:0;
    	background-color:white;
    	font-family:arial;
    	font-size:8pt;
    	width:100%;
    	height:100%;
    }
    .top {
    	position:absolute;
    	left:0;
    	top:0;
    	background-color:#00cc00;
    	width:100%;
    	height:100;
    }
    .topMenu {
    	position:absolute;
    	height:30;
    	top:100;
    	left:0;
    	width:100%;
    	background-color:#000000;
    	color:#ffffff;
    }
    .left {
    	position:absolute;
    	left:0;
    	top:130;
    	width:150;
    	height:100%;
    	background-color:#ff0000;
    }
    .main {
    	position:absolute;
    	left:150;
    	top:130;
    	height:auto;
    	width:auto;
    }
    </style>
    </head>
    <body>
    <div class="top">TOP</div>
    <div class="topMenu">TOP MENU</div>
    <div class="left">LEFT</div>
    <div class="main">COPY HERE</div>
    </body>
    </html>
    and what I'd like to do is have my "left" div start at 130 pixels from the top and fill to the bottom. I've set the height to auto, but that only fills to where the contents will fill to, I've set it to 100% but that starts at 130 pixels from the top, and goes to 130 pixels past the bottom of the screen. Is there any way just to fill the remainder?

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    I think you will have to script it. give the div an id so you can reference it then try adding this between </style> and </head>

    <script language="JavaScript">
    <!--
    function resetH()
    {
    document.getElementById('divid').offsetTop-=130;
    }
    onload=resetH;
    </script>
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

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