2

ブラウザウィンドウが最小の​​高さよりも短くなったときに#sidebar要素をスクロールオーバーフローさせようとしていますが、機能していないようです。なぜですか？

http://jsfiddle.net/q5jKM/1/

CSS-申し訳ありませんが、このファンキーなフォーマットを機能させることができません。

html,body{height:100%;margin:0}
#sidebar {
    width: 20em;
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index:2;
    color: #ffffff;
    background-color: #333333;  
    overflow:auto;
    min-height: 34em;
}

#sidebar .nav {
    width: 3em;
    float: right;
    overflow: auto;
    background-color: #2e2e2e;
    border-left: 2px groove #454545;
    height: 100%;
    position:relative;  
}

#sidebar .content {
    height: 100%; 
    width: 16.875em; /*    17-(2/16)   - 20em - .nav - nav border*/
    float:left; 
    position:relative;
}

#sidebar .top {
    position:absolute;
    top:0;
}
#sidebar .bottom {
    position:absolute;
    bottom:0;
}

#sidebar .middle {
    position: absolute;
    bottom: 12em;       /*  3.125*3  */
    top: 16em;          /*  3.125*4  */
    background: green;
}

.content .middle {
    overflow:auto;
}


#sidebar .content > div {width: 16.875em; } /*.top .middle .bottom*/
#sidebar .nav > div {width:3em; } /*.top .middle .bottom*/


    /*table-cell trying get vertical-align working*/
#sidebar .table-cell {display:table-cell;}
#sidebar .middle .table-cell {vertical-align: middle;}


#sidebar .content p, #sidebar .content li, #sidebar .content img {font-size: .75em; color: #dddddd;}

#sidebar ul {margin:0; padding: 0;}






#sidebar .nav li {
    padding: .5625em;
    list-style:none;
}
#sidebar .nav li img {
    height: 1.875em;
    width: 1.875em
}

#sidebar .nav .top li { border-bottom: 2px groove #454545 }
#sidebar .nav .bottom li { border-top:  2px groove #454545 }




.content li {
    position:relative;
    display:block;
    background-color: #444;
    padding: .72em;
    border-radius: .8em;
    border-bottom: 1px solid #292929;
    border-top: 1px solid #4c4c4c;
    text-align: center;
    font-size: 1em;
    letter-spacing: .1em;
    font-weight: normal;
    height: 1.2em;
}

.content li:after {
    content:"";
    position:absolute;
    display:block; 
    width:0;
    top:.11em; /* controls vertical position */
    right:-.852em; /* value = - border-left-width - border-right-width */
    border-style:solid;
    border-width:1.2em 0 1.2em 1.2em;
    border-color:transparent #444;
}

.content .top li{margin: .95em 0 1.9em 0;}
.content .bottom li{margin: 1.9em 0 .95em 0;}

.content .logo {
    text-align: center;
    padding: 1em 0 2em 0;
    width: 100%;
    border-bottom: 2px groove #454545;
}
.content p.welcome {
    text-align: center;
    line-height: 1.5em;
    margin: 1em 0;
}

HTML

    <div id="sidebar">


            <div class="nav">
            <div class="top">
            <ul>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
            </ul>
            </div>
            <div class="middle"><div class="table-cell"><p>test</p></div></div>
            <div class="bottom">
            <ul>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
            </ul>
            </div>
            </div>



            <div class="content">
                <div class="top">
                <ul>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                </ul>
                </div>
                <div class="middle"><div class="table-cell">
                <div class="logo"><img src="_images/g.svg"></div>
                <p class="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
                </div></div>
                <div class="bottom">
                <ul>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                </ul>
                </div>
                </div>
    </div>
4

4 に答える 4

4

とった！

追加：-＃sidebarがブラウザウィンドウと等しくなるようにします。

#sidebar{height:100%}

そして、次を追加します。-オーバーフローするコンテンツを提供します。

#sidebar .nav, #sidebar .content {min-height:34em}

ブラウザウィンドウが34emsより短くなると、＃sidebarがオーバーフローします。

于 2013-01-23T11:59:00.497 に答える
3

CSSメディアクエリルールを追加する必要があります。

@media all and (min-height: 34em) { 
    #sidebar{
        overflow: scroll;
    }
}

ブラウザの高さが34em未満になると、overflow: scrollルールがに追加されます#sidebar。

于 2013-01-23T06:59:10.437 に答える
0

私はこれをjqueryを使用して機能させました-ブラウザの高さを取得し、特定の高さに達したときにスクロールするようにcssオーバーフローを調整する必要があります

var heightToScroll = 600;
var viewHeight = $(window).height();
$(window).resize(function() {
if(viewHeight < heightToScroll){
    $('#sidebar').css("overflow","scroll");
}
});

http://jsfiddle.net/q5jKM/3/

于 2013-01-23T07:24:23.590 に答える
0

scroll代わりにオーバーフローを使用するauto

こちらのhttp://jsfiddle.net/q5jKM/2/をご覧ください

于 2013-01-23T05:57:06.733 に答える