Javascript 切换内容将滚动条推出窗口

Javascript 切换内容将滚动条推出窗口,javascript,html,css,Javascript,Html,Css,当我切换要显示的内容时,垂直滚动条的底部被按下。那么,当打开内容时,有没有办法调整滚动div的大小呢 注意:我需要所有div和布局保持完整,不需要移除div或更改布局来解决问题。提前谢谢 和CSS: html { min-height:100%; height:100%; position:relative; } body { background-color:blue; min-height:300px; } .center { overflo

当我切换要显示的内容时,垂直滚动条的底部被按下。那么,当打开内容时,有没有办法调整滚动div的大小呢

注意:我需要所有div和布局保持完整,不需要移除div或更改布局来解决问题。提前谢谢

和CSS:

html {
    min-height:100%;
    height:100%;
    position:relative;
}
body {
    background-color:blue;
    min-height:300px;
}
.center {
    overflow:hidden;
    min-height:100%;
    float:none;
    background-color:#FFF;
    color:#999;
    position:relative;
}
#contentSection {
    overflow-y:scroll;
    display:block;
    background-color:green;
}
/* ------------------Header ----------------*/
 .header {
    width:100%;
    height:5%;
    color:#000;
    min-width:768px;
    min-height:60px;
    position:relative;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin: 0 auto;
}
/* ------------------Container ----------------*/
 .container {
    width: 100%;
    max-width:100%;
    min-width: 768px;
    position:relative;
    height:90%;
    min-height:495px;
    max-height:90%;
}
/*----- Left -----*/
 .left {
    float:left;
    width:20%;
    text-align:center;
    min-height:360px;
    height:auto;
    position:relative;
    min-width:153px;
    max-height:95%;
    max-width:170px;
}
/*----- Right -----*/
 .right {
    float:right;
    width:20%;
    text-align:center;
    min-height:440px;
    height:auto;
    position:relative;
    max-height:95%;
    max-width:230px;
    min-width:160px;
}
/* ------------------Footer ----------------*/
 #footerlist li {
    float:left;
    font-size:12px;
    font-weight:bold;
    font-family:Arial;
    margin-left:10px;
}
#footerlist li a:link {
    color:#CCC;
    text-decoration:none;
}
/* unvisited link */
 #footerlist li a:visited {
    color:#CCC;
    text-decoration:none;
}
/* visited link */
 #footerlist li a:hover {
    color:#F90;
    text-decoration:underline;
}
/* mouse over link */
 #footerlist li a:active {
    color:#f90;
    text-decoration:none;
}
/* selected link */
 #footerlist li a {
    color:#000;
}
#footerlist li a :link {
    color:#000;
    text-decoration:none;
}
/* unvisited link */
 #terms #privacy #contact #help #careers #developers #advertisers #about #cookies:visited {
    color:#000;
    text-decoration:none;
}
/* visited link */
 div#footer {
    position:relative;
    width:100%;
    clear: both;
    height:2%;
}
#footerlist {
    display:table;
    margin-left:auto;
    min-width:650px;
    line-height:24px;
    margin-right:auto;
    bottom:0px;
    white-space:nowrap;
}
/*----- 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;
}
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";
}
html {
    min-height:100%;
    height:100%;
    position:relative;
}
body {
    background-color:blue;
    min-height:300px;
}
.center {
    overflow:hidden;
    min-height:100%;
    float:none;
    background-color:#FFF;
    color:#999;
    position:relative;
}
#contentSection {
    overflow-y:scroll;
    display:block;
    background-color:green;
}
/* ------------------Header ----------------*/
 .header {
    width:100%;
    height:5%;
    color:#000;
    min-width:768px;
    min-height:60px;
    position:relative;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin: 0 auto;
}
/* ------------------Container ----------------*/
 .container {
    width: 100%;
    max-width:100%;
    min-width: 768px;
    position:relative;
    height:90%;
    min-height:495px;
    max-height:90%;
}
/*----- Left -----*/
 .left {
    float:left;
    width:20%;
    text-align:center;
    min-height:360px;
    height:auto;
    position:relative;
    min-width:153px;
    max-height:95%;
    max-width:170px;
}
/*----- Right -----*/
 .right {
    float:right;
    width:20%;
    text-align:center;
    min-height:440px;
    height:auto;
    position:relative;
    max-height:95%;
    max-width:230px;
    min-width:160px;
}
/* ------------------Footer ----------------*/
 #footerlist li {
    float:left;
    font-size:12px;
    font-weight:bold;
    font-family:Arial;
    margin-left:10px;
}
#footerlist li a:link {
    color:#CCC;
    text-decoration:none;
}
/* unvisited link */
 #footerlist li a:visited {
    color:#CCC;
    text-decoration:none;
}
/* visited link */
 #footerlist li a:hover {
    color:#F90;
    text-decoration:underline;
}
/* mouse over link */
 #footerlist li a:active {
    color:#f90;
    text-decoration:none;
}
/* selected link */
 #footerlist li a {
    color:#000;
}
#footerlist li a :link {
    color:#000;
    text-decoration:none;
}
/* unvisited link */
 #terms #privacy #contact #help #careers #developers #advertisers #about #cookies:visited {
    color:#000;
    text-decoration:none;
}
/* visited link */
 div#footer {
    position:relative;
    width:100%;
    clear: both;
    height:2%;
}
#footerlist {
    display:table;
    margin-left:auto;
    min-width:650px;
    line-height:24px;
    margin-right:auto;
    bottom:0px;
    white-space:nowrap;
}
/*----- 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;
}