Question

我有一个设计，其中标题设置在absolute位置，高度为379px。我的内容也设置为absolute位置top:232px。我成功地将内容div拉伸到页面底部，但是，由于额外232px，即使内容未通过窗口的高度，也会添加垂直滚动条。

我环顾四周，发现了this主题，这几乎是我遇到的问题。不幸的是，该页面上发布的解决方案都没有解决我的问题。这是我的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来实现它，但我仍然可以使用带有jQuery库的javascript来扩展到底层。

<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 Layout Help - Stretch div to bottom of page

http://jsfiddle.net/CZayc/

将DIV拉伸到底部＆amp;删除滚动条

2 个答案: