Question

I have a design where there is a header set at absolute position with a height of 379px. My content is also set at absolute position with top:232px as well. I am successfully getting the content div to stretch to the bottom of the page, however, because of the extra 232px even if the content does not pass the height of the window a vertical scroll bar is added.

I’ve looked around and have come across this topic posted which pretty much is the issue I’m having. Unfortunately, none of the solutions posted on that page have solved my problem. Here is my CSS code:

 #wrapper   { position:absolute; top:0; left:50%; width:1000px; height:100%; margin-left:-500px; }
 #header    { z-index:1; position:absolute; top:0px; background:url(../images/layout/backdrop.png) no-repeat; width:1000px; height:379px; }
 #container {
      position:relative;
      top:232px;
      bottom:0;
      background-color:#d7d7d7;
      width:739px;
      height:100%;
      min-height:100%;
      margin-left:175px;
      border:1px solid #000;
      border-bottom:0;
      border-top-right-radius:20px;
      -moz-border-radius-topright:20px;
}

And the HTML Code:

 <div id="wrapper">
      <div id="header"></div>
      <div id="container">

      </div>
 </div>

Answer 1

Seeing that nobody has been able to answer this, i’ll post my solution to the problem.

Although I didn’t exactly achieve it the way I wanted to which was to use strictly CSS, I still got it to stretch to the bottom using javascript with jQuery’s library.

<script type="text/javascript">
//<![CDATA[
    /*
        Method calculates container height and stretches to bottom of page
        if content does not fill entire space.
    */
    function setHeight() {
        // Get css values needed to compute height.
        var topAttr = parseInt($('#container').css('top'), 10); // convert value to int...
        var winHeight = $(window).height(); // get user's browser height...
        var conHeight = $('#container').height(); // get container height...

        // If the size of the container is less than the size of the user's window... resize.
        if(conHeight < winHeight) {
            var newHeight = (winHeight - topAttr) - 1; // calculate the new height....
            $('#container').height(newHeight); // apply the height value to the container.
        }
    }

    // Run as soon as page loads...
    $(document).ready(function(){
        setHeight();
    });
// ]]>

I then, added a noscript block at the bottom of the text that appears in a red box asking the user to enable javascrpt…

<!-- DISPLAY IF USER HAS JAVA DISABLED -->
<noscript><div class="nojava">
    It has been detected that you have disabled javascript from running. Please consider enabling javascript in that it will improve this website's functionality substantially.
</div></noscript>
<!-- DISPLAY IF USER HAS JAVA DISABLED -->

I’m sure there is someone out there that can