Javascript 切换内容将滚动条推出窗口
当我切换要显示的内容时,垂直滚动条的底部被按下。那么,当打开内容时,有没有办法调整滚动div的大小呢 注意:我需要所有div和布局保持完整,不需要移除div或更改布局来解决问题。提前谢谢 和CSS: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
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;
}