Растянуть DIV на нижнюю и удалить полосу прокрутки

Question

У меня есть дизайн, в котором заголовок установлен в положение absolute с высотой 379px.Мой контент также установлен на absolute позиции с top:232px.Однако я успешно получаю содержимое div для растягивания до нижней части страницы, однако из-за дополнительных 232px, даже если содержимое не проходит по высоте окна, добавляется вертикальная полоса прокрутки.

Я осмотрелся и наткнулся на эту опубликованную тему, которая в значительной степени является моей проблемой.К сожалению, ни одно из решений, размещенных на этой странице, не решило мою проблему.Вот мой код CSS:

 #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;
}

И код HTML:

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

      </div>
 </div>

Answer 1

Видя, что никто не смог ответить на этот вопрос, я опубликую свое решение проблемы.

Хотя я не достиг этого точно так, как хотел, а именно - использовать только CSS,все еще получил его растянуть на дно, используя javascript с библиотекой jQuery.

<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();
    });
// ]]>

Затем я добавил блок noscript внизу текста, который отображается в красном поле.просить пользователя включить 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 -->

Я уверен, что есть кто-то, кто может

Answer 2

Справка по макету CSS - растянуть элемент div вниз страницы

http://jsfiddle.net/CZayc/