固定元素溢出

我試圖讓#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

固定元素溢出

回答

相關問題