拉伸DIV到底部&删除滚动条 [英] Stretch DIV to Bottom & Remove Scrollbar

问题描述

我有一个设计，其中有一个标头设置在绝对位置，高度 379px 。我的内容也设置为绝对位置， top：232px 。我成功地让内容div伸展到页面的底部，但是，因为额外的 232px 即使内容不通过窗口的高度垂直滚动条。

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.

我已经环顾四周，遇到了这主题发布，这几乎是我遇到的问题。不幸的是，在那个页面上发布的解决方案都没有解决我的问题。这是我的CSS代码：

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

和HTML代码：

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

      </div>
 </div>

推荐答案

看到没有人能够回答这个问题，i 'post post我的解决方案的问题。

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

虽然我没有真正实现它的方式，我想使用严格的CSS，我还是让它伸展到底部使用javascript和jQuery的库。

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

code> noscript 阻止在文本底部出现一个红色框，要求用户启用javascrpt ...

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 -->

我相信有人在那里可以

这篇关于拉伸DIV到底部&删除滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！