固定元素溢出

我试图让#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>

来源

2013-01-23 Ryan King

明白了！

添加： - 这样＃侧栏就等于浏览器窗口。

#sidebar{height:100%}

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

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

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

来源

2013-01-23 11:59:00

使用溢出scroll代替auto

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

来源

2013-01-23 05:57:06

对不起，也许我不够清楚。一旦浏览器窗口短于最小高度，我只想让它溢出。否则，我希望没有滚动条。溢出：滚动不是我要找的对不起。 –

你只需要添加一个CSS media query规则：

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

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

来源

2013-01-23 06:59:10

啊天才！谢谢。 –

@RyanKing：一定要把它标为答案;） –

我刚试过（它应该是最大高度，因为我敢肯定你知道），并且在将#sidebar加宽到22em后（因此.content没有包装当滚动条被添加时）它不起作用。我被告知它不知道滚动，因为绝对定位从流中删除#sidebar为空的元素。 –

我得到这个使用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-23 07:24:23 Bryan

固定元素溢出

回答

相关问题