css - 固定元素溢出

Question

一旦浏览器窗口短于其最小高度但似乎无法使其正常工作，我正在尝试让#sidebar 元素滚动溢出。知道为什么吗？

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>

score 4 · Accepted Answer

知道了！

添加： - 使#sidebar 等于浏览器窗口。

#sidebar{height:100%}

并添加： - 提供溢出的内容。

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

一旦浏览器窗口变得短于 34ems，#sidebar 就会溢出。

score 3 · Accepted Answer

你只需要添加一个CSS 媒体查询规则：

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

一旦浏览器高度小于 34em，那么overflow: scroll规则将被添加到#sidebar.

score 0 · Accepted Answer

我使用 jquery 让它工作 - 你需要获取浏览器的高度并调整 css 溢出以在达到一定高度时滚动

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

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

score 0 · Accepted Answer

0

使用溢出scroll而不是auto

看到这个http://jsfiddle.net/q5jKM/2/

于 2013-01-23T05:57:06.733 回答

css - 固定元素溢出

4 回答 4

Related

Reference