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

时间:2014-09-02 20:05:35

标签: javascript css html5 css3

当我切换要显示的内容时,向下按下垂直滚动条的底部。那么有什么方法可以在内容切换时调整滚动div的大小?

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

http://jsfiddle.net/a5pcctrz/1/

<body>
    <!--Header-->
    <div class="header"></div>
    <!--End Header-->
    <!--Container-->
    <div class="container">
        <!--Left-->
        <div class="left"></div>
        <!-- End Left -->
        <!--Right-->
        <div class="right"></div>
        <!-- end Right -->
        <!--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-->
        <!--Footer-->
        <div id="footer">
            <ul id="footerlist">
                <li id="terms"><a class="termsbutton" href="#termspop">Terms</a>

                </li>
                <li id="privacy"><a href="">Privacy</a>

                </li>
                <li id="contact"><a href="">Contact</a>

                </li>
                <li id="help"><a href="">Help</a>

                </li>
                <li id="careers"><a href="">Careers</a>

                </li>
                <li id="developers"><a href="">Developers</a>

                </li>
                <li id="advertisers"><a href="">Advertisers</a>

                </li>
                <li id="about"><a href="">About</a>

                </li>
                <li id="cookies"><a href="">Cookies</a>

                </li>
            </ul>
        </div>
        <!--End Footer-->
    </div>
    <!--End Container-->
</body>

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

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

0 个答案:

没有答案