根据视口调整div大小（仅限JQuery或JS解决方案）

Question

我想根据视口调整scrollable-div的大小，以便在调整大小时在父容器内保持100％高度和100％宽度。这包括始终在div内部保持滚动条。所以...

是否可以将div调整为100％高度＆amp;父容器的宽度取决于视口的大小？

到目前为止，我的主要问题与添加了一个的切换内容按钮有关 在scrollable-div顶部的空间，但不是调整它得到的div 按下直到底部滚动按钮被切断。在那儿 一种使用滚动条动态调整大小的方法吗？

更新：这是我专注于中心部分的代码。 #content和#contentsection是可滚动的div和内容，它们的父容器是＃networkworked，＃feed-content和.center

  <!--Center-->
        <div class="center">

         <!--Feed Content-->
         <div id="feed-content">
         <div id="networkfeed" class="feedpagetab activefeed"> 


 <input onclick="toggleContent()" type="checkbox" id="filterbutton" role="button">
         <label for="filterbutton" onclick=""><span class="filterswitch">Show Me</span><span class="filterswitch">Hide Me</span> 
          </label>

 <div class="borderline"></div>
     <div id="content"></div><!--Filtercontent ends here-->
            <div id="contentSection">
            <div id="content2">Lorem ipsum dolor sit amet, ius an dolorum lucilius sensibus, et sint graeco nec. Iudico atomorum eam eu. Nec equidem conceptam id. Cum velit viris voluptua an. Sea eu harum eirmod eloquentiam, quaestio complectitur voluptatibus in nam, an dicam platonem adolescens has. Te usu esse idque, no modo tractatos sed. Vero audire sapientem an sit, homero recteque pri in, vis at vidit admodum. Ex quo doctus eleifend contentiones, vis odio mucius tritani ut. Id cetero nostrud dissentiunt mel. Docendi scaevola vis ei. Vel et ponderum electram expetendis, cum cu quaestio definitionem, etiam ponderum vix ei. Ut his feugait assentior philosophia, atqui definitionem at mei. Liber sonet dictas ea has, nec odio fabellas ei. Vel oratio quodsi in, duo minim admodum ea. Pri id dolorum indoctum, vim at alia tritani. No pro esse error solet, vix quis prodesset ei. Tollit accommodare vis at, sed in tamquam prompta dolorem. Nam solum definitionem an, dicta nostrum adversarium ne nec. Eu docendi nominavi similique pri. Qui an natum tamquam, dictas invenire mei id. Cu omittam insolens rationibus ius, dicunt inciderint cum ea. Est vero dolorem et, assum antiopam mea ne. Te vel choro audiam, eum equidem nostrum ex. Ea nam offendit definitiones. In etiam debitis similique cum. Ius regione incorrupte te, utinam ceteros an has, omnium concludaturque cum eu. Eu sumo adhuc ius. Quo choro quodsi latine an. Nonumy deleniti duo ex, fastidii menandri accusata ut mea, ad minimum omnesque quo. Cum in molestiae mediocritatem. Partiendo voluptaria cum te. Illud reque convenire duo et, audiam denique consectetuer mei te. Bonorum fabellas interpretaris mel ad. Eu sanctus nominavi ius, oratio vocibus indoctum ea eos. Et nisl doming vituperatoribus vis. Ullum percipit inciderint ei duo, ex usu stet essent. Quis errem legere ex quo, usu ludus decore ut, vix cetero convenire honestatis et. Mucius nusquam platonem per et, cu mei nibh erant inermis. Ne quo erant commodo sadipscing. Mei delenit tibique aliquando no, vim ex omnis vocibus scriptorem. Reque aperiam hendrerit et per, sit suas vivendo corrumpit in. Ius ei falli doming periculis. Nam quis iuvaret at. Impedit minimum similique ei pri, graeco interpretaris eu ius, dolor probatus scribentur in qui. Duo aliquam omittam voluptaria no. Vel enim hendrerit persecuti ne. Sed no idque fastidii neglegentur. Everti accusamus deterruisset eos ut, an sea feugiat alienum rationibus. Duo ex graece gloriatur, lorem appetere inimicus sed eu, autem sanctus in ius. No lorem altera qualisque eum, id eum labore necessitatibus, sit no diceret pertinax partiendo. At pri hinc solet voluptatum, ut debitis intellegam vix. Decore ridens comprehensam sea id, ius aperiam delicatissimi no. Quas molestie ei his, in has augue equidem adipisci.
             </div><!--End Content-->             
             </div><!--End Content Section-->



          </div> <!--End Network feed-->
        </div><!--End Feed Content-->
    </div><!--End Center-->

css：

.center {
    overflow:hidden;
    min-height:100%;
    float:none;
    background-color:#FFF;
    color:#999;
    position:relative;
}
#contentSection {
    overflow-y:scroll; 
    display:block; 
    background-color:green;
}

/*----- Show me Button-----*/

#filterbutton[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}
[for="filterbutton"] {
    position: absolute;
    top:4px;
    padding: 0;
    left: 5%;
    width: 80px;
    text-align: center;
    padding: 4px;
    font-weight:bold;
    color: #555;
    text-shadow: 1px 1px 1px #DDD;
    font-family: Helvetica, Arial, "Sans Serif";
    font-size: 13px;
    border: 1px solid #CCC;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
    -moz-box-shadow: inset 0px 0px 1px 0px #FFF;
    box-shadow: inset 0px 0px 1px 0px #FFF;
    background: #EEE;
    background: -moz-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F9F9F9), color-stop(100%, #DDD));
    background: -webkit-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
    background: -o-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
    background: -ms-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#DDD', GradientType=0);
    background: linear-gradient(top, #F9F9F9 0%, #DDD 100%); 
}
[for="filterbutton"]:hover {
    color: #444444;
    font-weight:bold;
    border-color: #BBB;
    background: #CCC;
    background: -moz-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F9F9F9), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
    background: -o-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#CCC', GradientType=0);
}
[for="filterbutton"] span.filterswitch:last-of-type {
    display: none;
    visibility: hidden;
}
#filterbutton[type=checkbox]:checked {
    color:#FFA317;
}

#filterbutton[type=checkbox]:checked ~[for="filterbutton"] span.filterswitch:first-of-type {
    display: none;
    visibility: hidden;
}
#filterbutton[type=checkbox]:checked ~[for="filterbutton"] span.filterswitch:last-of-type {
    color:#3CC;
    display: block;
    visibility: visible;
}

#content {
    margin: 0; display:inline-block;
    position:relative; bottom:0;
    padding: 0; 
    padding-bottom:170px;
    margin-top:5px;
}

.borderline {
    width:100%; display:block;
    border-bottom:#000 solid 1px;
    padding-top:37px; top:0; 
}

和js：

var height = 0;
var minHeight = 200;
$("#content2").parent().siblings().each(function () {
    height = height + $(this).height();
});
// for when the document is loaded
$(document).ready(function () {
    var windowheight = $(window).height() - 100;
    $(".center").height();
    $(".center").css("min-height", minHeight + height + "px");
    var newHeight = $(".center").height() - height;
    $("#contentSection").css("height", newHeight - 0 + "px");
});

// for the window resize
$(window).resize(function () {
    var windowheight = $(window).height() - 100;
    $(".center").height(windowheight);
    $("#content2").height($("#content2").parent().height());
    var newHeight = $(".center").height() - height;
    $("#contentSection").css("height", newHeight - 0 + "px");
});

function toggleContent() {
  // Get the DOM reference
  var e = document.getElementById("content");
  // Toggle 
  e.style.display =="block" ? e.style.display="none" : 
e.style.display ="block"; 
}

到目前为止，我可以调整scrollable-div的大小，但我无法弄清楚如何调整滚动条的大小而不会在底部切断它：http://jsfiddle.net/a5pcctrz/1/

非常感谢任何正确方向的指示。

谢谢！