設置溢出滾動固定股利不起作用

溢出滾動將無法工作在固定的股利，這裏是codepen demo 設置溢出滾動固定股利不起作用

 
     #side-navbar { 
      overflow: scroll; 
      position: fixed; 
      min-height: 100vh; 
      width: 6rem; 
      float: left; 
      background-color: #000; 
      -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
      -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
      box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
     } 

#side-navbar .logo img { 
     margin: 0.5rem; 
     width: 5rem; 
     height: auto; 
    } 

    #side-navbar .menu-container { 
     overflow:visible; 
     min-height: calc(100vh - 24.6rem); 
     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     -webkit-box-align: center; 
     -webkit-align-items: center; 
     -moz-box-align: center; 
     -ms-flex-align: center; 
     align-items: center; 
     width: 100%; 
     -webkit-box-pack: center; 
     -moz-box-pack: center; 
     -ms-flex-pack: center; 
     -webkit-justify-content: center; 
     justify-content: center; 
    } 
    #side-navbar ul.social-menu { 
     overflow: visible; 
    } 
</pre>

來源

2016-04-24 Mostafa Ellethy

你能提供更多細節嗎？它有什麼問題？ – Aurasphere

@Aurasphere當設置溢出：滾動我的邊欄時，項目溢出滾動將無法正常工作。但問題是通過從最小高度變爲高度來解決的，謝謝。 –

@Aurasphere我試過了，但系統通知我必須等待2天才能接受它:( –

-1

問題解決了。使用最小高度可以讓菜單永遠呈現，但是當使用高度時，只有滾動才能完美呈現。

來源

2016-04-24 10:09:17

最小高度在Safari瀏覽器上無法正常工作，請問如何解決？ – Sangrai

兩件事：首先，嘗試使用height而不是min-height。其次，使用overflow-y:auto，它的工作方式比overflow:scroll好。這裏是你的代碼：

#side-navbar { 
 
      overflow-y: auto; 
 
      position: fixed; 
 
      height: 100vh; 
 
      width: 6rem; 
 
      float: left; 
 
      background-color: #000; 
 
      -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
 
      -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
 
      box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
 
     }

<div id="side-navbar"> 
 
<hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr> 
 

 
</div>

它工作在片段。在你的代碼中嘗試一下。如果您不想使用overflow-y auto，那麼請確保使用overflow-y:scroll。

來源

2017-02-24 22:41:47 IamGuest

設置溢出滾動固定股利不起作用

回答

相關問題