Home/ Questions/Q 9213531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T01:46:14+00:00

I have this HTML: <body> <div id=logo> <table id=width100 cellpadding=0 cellspacing=0 > <tr> <td

  • 0

I have this HTML:

<body>
<div id="logo">
    <table id="width100" cellpadding="0" cellspacing="0"  >
        <tr>
            <td width="33.33%" align="left">&nbsp;</td>
            <td width="33.34%" align="center"><a href="http://www.rawgameshop.com/"><img src="images/logo_new.png" /></a></td>
            <td width="33.33%" align="right"><img src="images/logo_right.png" /></td>
        </tr>
        <tr bgcolor="#731000" id="width100">
            <td height="15" colspan="3" ></td>
        </tr>
    </table>
</div>

<center>
<div id="container">
    <div id="main_body">
        asd
    </div>
</div>
</center>

And this CSS:

body {
    width:100%;
    height:100%;
    margin:0px;
    background-color:#ECECEC;
}

#logo {
    width:100%;
    height:165px;
    background-color:#FFFFFF;   
}

#width100 {
    width:100%;
}

#container {
    background-color:#FFFFFF;
    height:100%;
    width:900px;
}

#main_body {
    width:800px;
    background-color:#FFFFFF;
    height:100%;
}

My question is: why doesn’t my main_body div stretch down across the middle of the page? It is only as tall as the letters.

If I remove the <center> HTML tags it does stretch down, but at 100% screen size, that means I have to scroll down to the end. I wanted it to be to the edge of the screen, not further.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    height:100% takes the height of the first parent element that has a height set on it. As all your parent objects have a percentage height on it will go right up to the body and take 100% of that height.

    You will either need to set #logo as a percentage height and then your main_body as the rest of the percentage otherwise you will need javascript / jquery to resize your main_body as css hasn’t enabled a way to do calculations yet (although I think it may be coming soon)

    Have a look at this post as they were trying to achieve the same thing:

    Calculate value with CSS3

    If you are going the jQuery route you will need to add the jquery library to your page (I usually put this at the bottom of the page) and then anywhere after this you need to include your script you are going to run like so:

    <script type="text/javascript">
  $(document).ready(function () { 
    var newHeight = $(window).height() - $('#logo').height();
    var oldHeight = $('#container').height();

    if (newHeight > oldHeight) {
      $('#container').height(newHeight);
    }
  });
</script>

    the $(document).ready(function(){}) means that anything that is within the function will be fired once the document (web page) has finished loading

    • 0